Question

完成这样的事情的最佳方法是什么。我有一张信用票据，我希望编辑单价。我会提取发票明细，然后用户可以编辑/更改单价。当我这样做时，所有领域都在变化。不知怎的，我需要把它放在自己的状态？我不知道怎么做。

使用React.createClass的父组件：

line_items = [
  {
    id: 1,
    unit_amount: "250.00",
    ...
  },
  {
    ...,
    unit_amount: "20.00",
    ...
  }
]

//render
<LineItems items={this.props.line_items} />

使用React.createClass的子组件：

getInitialState(){
  return{
    creditedValues: []
  }
},

_valueChange(e){
  this.setState({creditedValues: this.state.creditedValues.concat([e.target.value])})
},

render(){
  var items = this.props.items;
  if (items.length !== 0) {
    var lineItems = items.map(function(l){
      return(
        <tr key={l.id}>
          <td data-label="Payment">{l.description}</td>
          <td className="credit-note-qty" data-label="Issue Date">{l.quantity}</td>
          <td className="credit-note-up" data-label="Amount">{l.unit_amount}</td>
          <td className="credit-note-amt" data-label="Period">
            <input type="number" value={this.state.newValue} onChange={this._valueChange} />
          </td>
        </tr>
      )
    }.bind(this));
  };

  return(<tbody>{lineItems}</tbody>)
}

在我更改为concat之前，当我更改值时，所有值都会同时更改。如何防止这种情况？

修改

我已将_valueChange更新为：

_valueChange(i, e){
  e.preventDefault();
  var obj = this.props.creditNote.line_items;
  var num = obj.find(p => i === p.id);
  num.unit_amount = e.target.value;
  this.setState({creditedValues : num});
}

现在输入更改为：

<input type="number" value={this.state.newValue} onChange={this._valueChange.bind(this, l.id)} />

现在我有我想要的东西，但有一个但是。如果用户更新另一个输入字段，则它将替换整个状态。是的，因为代码我已经取代了整个州。如果用户更新了两个或多个字段，如何保留新对象？

防止循环中的其他字段随状态变化

0 个答案: