Edited at

Reactで外からvalueを変更できるinput要素を作りたい

More than 3 years have passed since last update.

こんな感じでpropsでデフォルトのテキストを渡せるようにしたい。

var InputBox = React.createClass({

render: function() {
return <input type="text" value={this.props.text} />
}
});

しかしこれだと動かない。

http://jsfiddle.net/hokaccha/5edoqsnk/

理由はこちらにある通り。

reactjs - React.jsでFormを扱う - Qiita

defaultValueを使えばいいらしい。

var InputBox = React.createClass({

render: function() {
return <input type="text" defaultValue={this.props.text} />
}
});

と思ってやってみたけど、propsが変更されたときに追従してくれない。

http://jsfiddle.net/hokaccha/fqb9k156/

valueにしてstateで管理するようにしてcomponentWillReceivePropssetStateすることで動くようになった。

var InputBox = React.createClass({

getInitialState: function() {
return { text: this.props.text };
},
componentWillReceiveProps: function(nextProps) {
this.setState({ text: nextProps.text });
},
onChange: function(e) {
this.setState({ text: e.target.value });
},
render: function() {
return <input type="text" value={this.state.text} onChange={this.onChange} />
}
});

http://jsfiddle.net/hokaccha/apxycw0c/

ホントにこれでいいのかは謎。