如果您想要存储和更新状态，则需要将数据添加到组件状态。这可以在构造函数中完成，然后在任何组件方法中使用 setState() 进行修改（即，如果您从 API 获取数据，或使用更改处理程序进行修改）。组件将如下所示：

constructor(props) {
  super(props);
  // set initial state, set to { array: [] } if getting data from API
  this.state = {
    array: [
      { itemId: "optionOne", name: "Option One", quantity: 10 },
      { itemId: "optionTwo", name: "Option Two", quantity: 20 },
      { itemId: "optionThree", name: "Option Three", quantity: 30 }
    ]
  };
}
handleChange = (itemIndex, itemValue) => {
  console.log(itemIndex, itemValue);
  // set state to changed values
  this.setState({
    array: this.state.array.map((item, index) => {
      // update item quantity (or clone & mutate if you need to maintain immutability)
      if (index === itemIndex) { item.quantity = +itemValue };
      return item;
    })
  });
};
render() {
  return (
    <div>
      {this.state.array.map((item, key) => {
        return (
          <FormGroup controlId="siteVisit">
            <Row>
              <Col xs={12} md={4}>
                <h3>{item.name}</h3>
              </Col>
              <Col xs={12} md={8}>
                <FormControl
                  type="text"
                  key={item.itemId}
                  onChange={item => {
                    this.handleChange(key, item.target.value);
                  }}
                />
                <span>{item.quantity}</span>
              </Col>
            </Row>
          </FormGroup>
        );
      })}
    </div>
  );
}

编辑

虽然上述解决方案相对简单，但根据您的应用结构，使用您传递的 “事件发射器”类函数 可能更有意义，该函数会被调用。这样，就无需在子组件内存储或更新状态 - 它变得无状态且纯粹是展示性的。所有数据变化/更新都将发生在父级上，并简单地传递给子级进行显示。想要这样做的主要原因是如果数据发生变化并且新数据从父级发送下来。如果您没有监听/响应子 props 中的更改，这些更改将永远不会触发对子组件的更新，除非您明确监听更改，在这种情况下，您就是在重复代码。无论如何，对于这个简单的例子来说可能有点过头了，但这是值得思考的事情。

正如评论中提到的，如果您想编辑数据，则应该将数据存储在状态中。您有一个不错的开始，将索引和值输入到更改函数中。然后，您需要复制数组以防止 直接状态突变 ，相应地更改值并使用 setState 将更改注册到 React。

在此分叉 。