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'));
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/02 04:34