在表单反应中发送数据和删除行的正确方法

Question

我得到了一个产品列表，这个产品包含不同的价格。当用户选择产品时，他可以编辑所有价格。这看起来像这样：

_renderPriceRow() {
  return (
    this.props.product.prices.map((price, i) => {
      return (
        <tr key={'pricerowinput-' + Math.random()}>
          <td >
            <input type="text" className="form-control" defaultValue={price.quantity}/>
          </td>
          <td >
            <input type="text" className="form-control" defaultValue={price.name}/>
          </td>
          <td >
            <input type="text" className="form-control" defaultValue={price.price}/>
          </td>
          <td>
            <button type="button" className="btn btn-sm" aria-label="Delete price" onClick={() => alert("Price deleted")}>
              <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
      );
    })
  );
}

我随机化了行的键，以便重新呈现行，就好像它们不更改默认值一样，如果选择了其他产品，默认值也不会更改。

道具：

const mapStateToProps = (state) => {
  const products = state.products.items;
  const isEmpty = state.products.items === undefined || state.products.items.size === 0 || state.productSelected === null;
  if(isEmpty) {
    return ( {product: null});
  }
  return {
    product: products.get(state.productSelected)
  }
};

因此，产品取自产品(过滤(列表所在的商店。

对于我的下一步，我实际上有两个问题：1. 如何添加或删除行？2. 如何将表中的价格组合成数组，并将其他产品字段(未显示(组合到我可以调度的对象？

由于 redux，一切都只是一个属性。因此，将它们放入组件中很容易。怎么把他们弄出来？

Answer 1

如果所有值都保留在 Redux 存储中，则必须通过更新该存储来添加和删除值。

您可以将onChange处理程序添加到表输入字段中：

<input
   type="text"
   className="form-control"
   defaultValue={price.quantity}
   onChange={this.props.store.updateField}
/>

其中updateField是 Redux 操作，可触发化简器更新您的商店。

如果要删除整行，请在按钮onClick中触发一个操作，该操作将从存储中删除该条目。您可以推断应从事件目标中删除哪一行。