react.jsでformに初期値を持たせたい。

ES6+react.js(15.3.2)をbabelで変換して使っています。
親コンポーネントから、formを持つ子コンポーネントへ初期値をstateで渡したいのですがうまくいきません。propsで渡すとformを変更できなくなってしまいます。
なお、うまくいけばformの変更を親から利用しようと考えています。

react.js
1class UMU extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {value: this.props.value};
5    this.handleChange = this.handleChange.bind(this);
6  }
7
8  handleChange(event) {
9    this.setState({value: event.target.value});    
10    this.props.onEventCallBack({ value: event.target.value });
11  }
12
13  render() {
14    return (
15      <form>
16        <label>
17          <select value={this.state.value} onChange={this.handleChange}>
18            <option value="0">なし</option>
19            <option value="1">あり</option>
20          </select>
21        </label>        
22      </form>
23    );
24  }
25}
26
27class Texts extends React.Component {
28  constructor(props) {
29    super(props);
30    this.state = {value: ""};
31    this.handleChange = this.handleChange.bind(this);
32  }
33
34  handleChange(event) {
35    this.setState({value: event.target.value});
36    this.props.onEventCallBack({ value: event.target.value });
37  }
38  render() {
39    return (
40      <form onSubmit={this.handleSubmit}>
41        <label>コメント:
42          <input type="text" value={this.state.text} onChange={this.handleChange} />
43        </label>
44      </form>
45    );
46  }
47}
48
49const json = {
50    "name":"tanaka",
51    "umu":"1",
52    "comment":"foo"
53}
54
55class Box extends React.Component {
56  constructor(props) {
57    super(props);
58    this.state =  {data:[]};
59  }
60
61  pushMessage(comment){
62    console.log(comment);
63  }
64
65  componentDidMount() {
66      this.setState({data: json});
67    }
68  render(props) {
69    return (
70        <div>
71            <div>name:{this.state.data.name}</div>
72            <UMU value={this.state.data.umu} onEventCallBack={this.pushMessage}/>
73            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage}/>
74        </div>
75      );
76  }
77}
78ReactDOM.render(<Box/>, document.getElementById('app'));

行動規範の内容に同意します

回答1件

ベストアンサー

子コンポーネントと親コンポーネントでフィールドの値を別々に持ってしまうと対処しづらいと思いますので、
初期値を親コンポーネントから送るのが良いかと思いました。

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data: {
            umu: '',
            comment: '',
        },
    };
  }

 ：（省略）

  render(props) {
    return (
        <div>
            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage} />
        </div>
    );
  }
}

子コンポーネントはpropsの値のみを利用し、onEventCallBack()を利用して親stateを操作することで表示がロックされることも無いと思います。

class Texts extends React.Component {
  handleChange(event) {
    this.props.onEventCallBack({ value: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>コメント:
          <input type="text" value={this.props.value} onChange={event => this.handleChange(event)} />
        </label>
      </form>
    );
  }
}

即興でコードレビューできていませんが、役に立ちそうであればお試しください。

投稿2017/01/31 05:26