ReactJS：如何在模式中使用单个表单在表中添加多行

我有一个情态动词的形式。我试图设置表单输入字段的状态，当用户提交表单时，数据应该显示在表中，并且可以使用同一表单在表中添加多行。 我在构造函数中设置了初始状态，如下所示

product: [{ 
        name: '',
        value:'',
        price:''
}]

在一次变革中，我正在做以下工作：

changeHandler = (event) => {
    console.log('change handler', event)

    const value = event.target.value;
    this.setState({ [event.target.name]: value
 });
    console.log('product : ', this.state.product)
}

---

产品控制台为空。如何设置产品的状态？

您需要更新正确的状态项：

product: [{ 
  name: '',
  value:'',
  price:''
}]

changeHandler = (event, arrayIndex) => {
  const {value, name} = event.target;
  const newData = this.state.product.map((el, idx) => {
    if (idx === arrayIndex) {
      return {
        ...el,
        name: value
      }
    }

    return el;
  });

  this.setState({product: newData});
}

---

因为setState是异步函数。尝试在函数外部或超时情况下记录它。@demkovych我尝试在函数外部记录它，但它仍然为空。我设置了它数组，因为我必须通过该表单在表中添加多行。您的

事件.target.name

？它是输入标记的名称。它是

产品[0]

对于第一项？问题是您将状态保存为对象，但定义为数组。您需要正确设置状态。