Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with event.target.value for input with fixed value #2444

Closed
menelaos opened this issue Oct 31, 2014 · 3 comments
Closed

Problem with event.target.value for input with fixed value #2444

menelaos opened this issue Oct 31, 2014 · 3 comments

Comments

@menelaos
Copy link

Check the following example:

var Example = React.createClass({
  getInitialState: function() {
      return {value: 'Try to type or backspace!'};
  },
  handleChange: function(event) { 
    this.setState({value: event.target.value});
  },
  render: function() { 
    return ( 
      <div>
        <div>{this.state.value}</div>
        <input type="text" value="fixed" onChange={this.handleChange} />
      </div>
    );
  } 
});

The first div's content will either read "fixe" (on backspace) or "fixed{lastKeyPressed}".
Intuitively, it should always read "fixed".

@syranide
Copy link
Contributor

This is correct and by design, by updating the value of input with event.target.value you have a controlled input. There is more information in the docs.

http://facebook.github.io/react/docs/forms.html#controlled-components

@menelaos
Copy link
Author

menelaos commented Nov 1, 2014

Sorry to bother you one more time.

The input value in the example above is fixed for all times (value="fixed").
Intuitively, the onChange event should not even fire.
It does however and in a strange way: event.target.value does not equal "fixed"
(the value of the input field for all times) but either "fixe" or "fixed{oneOtherCharacter}".

@syranide
Copy link
Contributor

syranide commented Nov 1, 2014

@menelaos No problem.

The input value in the example above is fixed for all times (value="fixed").

You never update the value and thus it appears read-only/fixed. A read-only/fixed input field is a side-effect of a controlled component that has a fixed value.

Read the link I posted and it might become clearer:
http://facebook.github.io/react/docs/forms.html#controlled-components

PS. If you want a read-only input then set the readOnly attribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants