ReactJS - multiline textarea
You are setting the value of the <textarea>
the correct way, via the value
attribute, the issue is that the string you are getting as the value of this.props.children
is actually not what you think it is.
With an input value of "#Title \n text"
in your <TextInput>
component, the value of this.props.children
is actually "#Title \\n text"
(notice the double backslash), you need to do something like the following to correctly output the newline character:
render: function(){ var value = this.state.currentValue.replace('\\n', '\n'); return ( <textarea name="body" onChange={this.handleChange} value={value}/> ) }
If you specify your input value via value
attribute then it textarea will be rendered with that value on every rerender. Instead, you should use defaultValue
, if I understood correctly.
var TextInput = React.createClass({ getInitialState: function(){ return {currentValue: this.props.children} }, handleChange: function(event){ //handler }, render: function(){ return ( <textarea name="body" onChange={this.handleChange} defaultValue={this.state.currentValue} /> ) } });
Also I should mention that in React, using props
in getInitialState
is antipattern, but this is other question .. and explained in official documentation.