Skip to content

Uncontrolled <textarea/> ignores setState() #1986

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

Closed
ASCIIteapot opened this issue Aug 3, 2014 · 5 comments
Closed

Uncontrolled <textarea/> ignores setState() #1986

ASCIIteapot opened this issue Aug 3, 2014 · 5 comments

Comments

@ASCIIteapot
Copy link

Calling setState() for uncontrolled textarea, does not lead to the expected result. In the example http://jsfiddle.net/c88aK/ pressing the button Reset state should reset the state of the input fields to their default values​​. Element input is resets as expected, textarea not. In the debugger, method textarea .render () gets the correct initial data, but changes in the DOM does not occur.

Is this a bug in the implementation of the textarea.render() or I do not correctly understand the essence of uncontrolled input fields?

In any case, as I should reset the value of textarea on the initial state?

@sophiebits
Copy link
Collaborator

You should always treat state like private instance variables and should never call setState except on this – if you want to allow other components to set your state, you can expose specific setter methods. In this case, you should simply set the value in the DOM directly by setting this.refs.textf1.getDOMNode().value. You can also of course use controlled components and take advantage of React's data flow, which is recommended – it takes a little more work initially but tends to be much easier to reason about down the road.

@codrin-iftimie
Copy link

I can see that this is a closed issue, but:
http://jsfiddle.net/kb3gN/6115/ This works using React 0.9
http://jsfiddle.net/ezrq8rdf/1/ Something change along the way v0.10 since on 0.11 it doesn't work not even if it's controlled( http://jsfiddle.net/ezrq8rdf/4/ )

@waldreiter
Copy link
Contributor

@codrin-iftimie
In your uncontrolled code you can set the value directly in the DOM node:

instance.refs.textarea.getDOMNode().value = 'something new';

In your controlled example you need to change the value of the component (not refs.textarea):

instance.state.value = 'something new';
instance.forceUpdate();

@codrin-iftimie
Copy link

Oh my bad. Cool. Thanks

@sophiebits
Copy link
Collaborator

instance.state.value = 'something new';
instance.forceUpdate();

This is better as instance.setState({value: 'something new'}).

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

4 participants