当从状态中删除列表项时输入不会改变

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