如何設置/更新React.js中的單擊項？

Question

您能否告訴我如何在React.js中設置/更新單擊的項目？ 我希望clicked元素的值更改為“ test”。 如何設置此類事件處理程序來執行此操作？

這是我的代碼

在項目上單擊，我試圖像這樣更新項目

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

Answer 1

由於您的data對象是一個數組，因此我認為實現此目的的最簡單方法是向btnClick()函數發送被單擊元素的id ，更新該值，然后保存新狀態。

碼筆

像這樣：

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

通過將map(item) => {更改為map(item, i) => {您可以使用Array map方法的index參數。 然后在綁定btnClick函數時使用此i變量。

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

在此， id是單擊的項目的索引。 首先創建this.state.data的淺表副本，然后將其放入本地temp變量中。 然后，更改temp[id]的hse屬性。 最后，使用局部變量更新data狀態。

編輯：修復斷開的密碼筆鏈接