React Changing Textarea Values

Question

I am working on a project that is mostly notepad. I'm having problems updating the value of <textarea> when calling ajax. I tried to set the textarea value property, but then it's impossible to change its value. How to make sure that when the state changes, the value of the text area changes and it can be edited.

I have the following code.

In parent class

<Editor name={this.state.fileData} /> 

In class editor

 var Editor = React.createClass({ render: function() { return ( <form id="noter-save-form" method="POST"> <textarea id="noter-text-area" name="textarea" value={this.props.name}></textarea> <input type="submit" value="Save" /> </form> ); } 

});

I cannot use defaultValue because the value of the text area is unknown when the page loads, and when I try to put data between the text areas, nothing happens. I would like it to take on the value of the state whenever the state changes, but between them it must be editable.

thanks

edit

I managed to get it to work using jQuery, but instead I would like to do it in React, I called it before rendering:

 $('#noter-text-area').val(this.props.name); 

Answer 1

I think you want something like:

parent:

 <Editor name={this.state.fileData} /> 

Editor:

 var Editor = React.createClass({ displayName: 'Editor', propTypes: { name: React.PropTypes.string.isRequired }, getInitialState: function() { return { value: this.props.name }; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { return ( <form id="noter-save-form" method="POST"> <textarea id="noter-text-area" name="textarea" value={this.state.value} onChange={this.handleChange} /> <input type="submit" value="Save" /> </form> ); } }); 

This is basically a direct copy of the example provided at https://facebook.imtqy.com/react/docs/forms.html.

Update for React 16.8:

 import React, { useState } from 'react'; const Editor = (props) => { const [value, setValue] = useState(props.name); const handleChange = (event) => { setValue(event.target.value); }; return ( <form id="noter-save-form" method="POST"> <textarea id="noter-text-area" name="textarea" value={value} onChange={handleChange} /> <input type="submit" value="Save" /> </form> ); } Editor.propTypes = { name: PropTypes.string.isRequired }; 

Answer 2

As a newbie to the React world, I came across similar issues where I could not edit text area, and struggled with binding. It is worth knowing about controlled and uncontrolled elements when it comes to reactions.

The value of the following uncontrolled textarea field of uncontrolled textarea may be changed due to value

  <textarea type="text" value="some value" onChange={(event) => this.handleOnChange(event)}></textarea> 

The value of the following uncontrolled textarea may be changed due to the use of defaultValue or no value attribute

 <textarea type="text" defaultValue="sample" onChange={(event) => this.handleOnChange(event)}></textarea> <textarea type="text" onChange={(event) => this.handleOnChange(event)}></textarea> 

The value of the following controlled textarea can be changed due to how the value is mapped to the state, as well as in onChange events

 <textarea value={this.state.textareaValue} onChange={(event) => this.handleOnChange(event)}></textarea> 

Here is my solution using a different syntax. I prefer auto-bind over manual binding, however, if I hadn’t used {(event) => this.onXXXX(event)} this would make the textarea content unavailable for editing OR event.preventDefault() does not work as expected. I think I still have a lot to learn.

 class Editor extends React.Component { constructor(props) { super(props) this.state = { textareaValue: '' } } handleOnChange(event) { this.setState({ textareaValue: event.target.value }) } handleOnSubmit(event) { event.preventDefault(); this.setState({ textareaValue: this.state.textareaValue + ' [Saved on ' + (new Date()).toLocaleString() + ']' }) } render() { return <div> <form onSubmit={(event) => this.handleOnSubmit(event)}> <textarea rows={10} cols={30} value={this.state.textareaValue} onChange={(event) => this.handleOnChange(event)}></textarea> <br/> <input type="submit" value="Save"/> </form> </div> } } ReactDOM.render(<Editor />, document.getElementById("content")); 

Library versions

 "babel-cli": "6.24.1", "babel-preset-react": "6.24.1" "React & ReactDOM v15.5.4"