reactで入れ子にしたstateを変更するにはどうすればいいでしょうか?
this.state.val.valChildren
の様な場合です。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
説明の意図がわかりません。子コンポーネントの持つstateを親コンポーネントから操作したいということでしょうか?
回答2件
0
ベストアンサー
以下に動作コードを置いています
http://jsbin.com/meyiwoy/edit?html,js,output
js
1 2class Test extends React.Component { 3 constructor() { 4 super() 5 this.state = { 6 val:{ 7 valChildren: 0 8 }, 9 val2:{ 10 valChildren2: 41 11 } 12 } 13 } 14 15 componentDidMount() { 16 this.setState({ 17 val:{ 18 valChildren: 'changed!' 19 } 20 }) 21 } 22 render() { 23 24 return ( 25 <div> 26 <h1>value</h1> 27 {JSON.stringify(this.state)} 28 </div> 29 ); 30 } 31} 32 33 34React.render( 35 <Test />, 36 document.getElementById('root') 37);
- output
value {"val":{"valChildren":"changed!"},"val2":{"valChildren2":41}}
setState
で変更箇所を指定すれば、その部分だけ変更可能です
投稿2017/09/20 01:57
総合スコア708
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
私の場合は、親階層を一度変数として引き出して、子階層を編集後、親階層ごとsetStateしてます。
JavaScript
1class Hoge extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = { 5 layer1: [ 6 { 7 value: 1 8 }, 9 { 10 value: 2 11 }, 12 ] 13 }; 14 } 15 componentDidMount() { 16 let layer1 = this.state.layer1; 17 layer1[0].value = 5; 18 this.setState({ 19 layer1: layer1 20 }); 21 } 22}
投稿2017/09/20 00:18
総合スコア9206
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。