reactjs

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/

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