React.jsでクリックしたアイテムを設定/更新する方法は？

Question

React.jsのクリックしたアイテムを設定/更新する方法を教えてください。 クリックした要素の値を「テスト」に変更したい。このようなイベントハンドラを設定するにはどうすればよいですか？ここで

は、私はあなたのdataオブジェクトが配列であるので、その

btnClick(obj) { 
     obj.hse = 'test'; 
     console.log(obj); 
     // this.setState({ 
     //  data: [obj] 
     // }); 
    } 

Answer 1

のようなアイテムを更新しようとしていますクリックした項目にmy code

ですが、私はこれを実装する最も簡単な方法は、あなたを送信することだと思いますbtnClick()は、クリックされた要素のidを機能させ、その値を更新して新しい状態を保存します。そのよう

Codepen

は：map(item, i) => {にmap(item) => {を変更することにより

this.state.data.map((item, i) => { 
    return <li onClick = { 
    this.btnClick.bind(this, i) 
    > { 
    item.hse 
    } < /li>; 
}) 

あなたはArray map方法のindexパラメータを利用します。このi変数は、btnClick関数をバインドするときに使用されます。

btnClick(id) { 
    let temp = this.state.data.slice(); 
    temp[id].hse = 'test'; 
    this.setState({ 
     data: temp 
    }); 
} 

ここで、idはクリックされた項目のインデックスです。まず、this.state.dataの浅いコピーを作成し、それをローカルのtemp変数に入れます。次に、hseプロパティをtemp[id]に変更します。最後に、data状態をローカル変数で更新します。

編集：固定壊れたcodepenリンク