反應：輸入字段與刪除組件的關聯值

我有一個存儲在this.state.items中的項目數組，用戶可以通過單擊修改this.state.items的按鈕來添加/刪除項目。反應：輸入字段與刪除組件的關聯值

我有這樣的事情。（此代碼是未經測試，並且可能無法編譯，但你可能明白我的意思。）

TextField = React.createClass({ 
    render() { 
     return <input type="text"/>; 
    } 
}); 

TextList = React.createClass({ 
    getInitialState() { 
     return { 
      items: [<TextField />, <TextField />, <TextField />] 
     }; 
    }, 

    addItem() { 
     // Adds a new <TextField /> to this.state.items 
    }, 

    removeItem(index) { 
     // Filters out the item with the specified index and updates the items array. 
     this.setState({items: this.state.items.filter((_, i) => i !== index)}); 
    }, 

    render() { 
     return (
      <ul> 
      {this.state.items.map((item, index) => { 
       return (
        <li key={index}> 
         {item} 
         <button onClick={this.props.removeItem.bind(null, index)}>Remove</button> 
        </li> 
       ); 
      })} 
      </ul> 

      <button onClick={this.addItem}>Add New Item</button> 
     ); 
    } 
});

這可以在this.state.items刪除指定的項目。我在控制檯中看到它，這部分工作正常。但這不是提供給用戶的內容。

例如，如果有3個輸入字段，並且用戶類型分別爲「一個」，「兩個」和「三個」，則如果他點擊「兩個」的刪除按鈕，則輸入字段爲「三「被移除。換句話說，總是最後一個字段被刪除。

我該如何解決這個問題，以便輸入字段的值與刪除的字段正確關聯？

來源

2015-10-17 CookieMonster

這是因爲基於他們的關鍵，反應回收物品的速度和效率。使用總是0,1,2等的索引因此具有不希望的結果。

如何應對工作：

你有索引0,1,2項的列表：該反應呈現。
用戶刪除第一項
名單現在是2項長：指數0,1
反應過來的時候重新呈現，它扣除（錯誤地）從你的鑰匙該項目0,1不變（因爲鍵是相同的），並且第三個項目被刪除。

解決方案：使密鑰唯一到特定項目。更好地根據項目內容。

來源

2015-10-17 18:11:58 wintvelt

謝謝。這就說得通了。我無法使用項目內容來生成密鑰，因此我使用[this]（http://stackoverflow.com/a/29662858/1982441）解決方案。 – CookieMonster

反應：輸入字段與刪除組件的關聯值

回答

相關問題