當從狀態中刪除列表項時輸入不會改變

Question

我做了一個簡單的類，它顯示了一個列表，您可以將li項添加或刪除到狀態中。但是，這些li項目包含輸入框。

假設有3個li項目，裏面有3個輸入框。您在第一個列表項的輸入框中輸入內容，然後您想要刪除包含您填充的輸入的li。

即使我的索引是正確的反應總是刪除最後一個項目，或者我認爲它刪除了最後一個項目，也許它會刪除具有正確索引但保留輸入值的確切項目。我該如何解決這個問題？

class DataTable extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      data: [ 
       {product: 'a', quantity: 0, price: 0}, 
      ], 
     }; 
    } 

    render() { 
     if (!this.props.isOpen) { 
      return false; 
     } 
     const items = this.state.data.map((key, i) => { 

      return (
       <li key={i}> 
        <input name="text" defaultValue={key.product}/> 
        <buttun className="btn" onClick={this.removeItem.bind(this, i)}/> 
       </li> 
      ) 
     }) 
     return (
      <div> 
       <button className="btn" onClick={this.addItem.bind(this)}>Add Product</button> 
       <ul> 
        {items} 
       </ul> 
      </div> 
     ) 
    } 

    addItem() { 
     const newState = update(this.state.data, { 
      $push: [{product: '', quantity: 0, price: 0}] 
     }); 
     this.setState({ 
      data: newState 
     }) 
    } 

    removeItem(index) { 
     const newArray = update(this.state.data, { 
      $splice: [[index, 1]] 
     }); 
     this.setState({ 
      data: newArray 
     }) 
    } 
} 

export default DataTable 

Answer 1

不知道這是否是您的問題，但您使用的是數據索引作爲關鍵。當你不修改集合時，這樣做是很好的。密鑰必須始終保持不變，發生的情況是您刪除一個項目並添加另一個項目，並且React認爲輸入是另一個項目，因爲密鑰已更改。

constructor(props) { 
    super(props); 

    this.state = { 
     data: [ 
      {product: 'a', quantity: 0, price: 0}, 
     ], 
    }; 
    this.dataKey = 0; 
    render() { 
     if (!this.props.isOpen) { 
      return false; 
     } 
     const items = this.state.data.map((value) => { 

      return (
       <li key={value.key}> 
        <input name="text" defaultValue={value.product}/> 
        <buttun className="btn" onClick={this.removeItem.bind(this, i)}/> 
       </li> 
      ) 
     }) 
     return (
      <div> 
       <button className="btn" onClick={this.addItem.bind(this)}>Add Product</button> 
       <ul> 
        {items} 
       </ul> 
      </div> 
     ) 
    addItem() { 
     const newState = update(this.state.data, { 
      $push: [{product: '', quantity: 0, price: 0, key: this.dataKey++}] 
     }); 
     this.setState({ 
      data: newState 
     }) 
    } 

    removeItem(index) { 
     const newArray = update(this.state.data, { 
      $splice: [[index, 1]] 
     }); 
     this.setState({ 
      data: newArray 
     }) 
    } 
} 

它只是一些獨特而不變的東西。舉個例子，身份證對此很有幫助。 https://facebook.github.io/react/docs/lists-and-keys.html