关于使用 setState 将输入值添加到数组的问题

Question

我正在尝试使用 setState 通过基本的 HTML 输入来更新 React 中的状态数组。 我尝试更新的状态如下：

 "businessName": "",
  "grossAnnualSales": 0,
  "contactEmail": "",
  "numEmployees": 0,
  "annualPayroll": 0,
  "locations": [{"zip": ""}],
  "industryId": "",

我需要将用户在 React 组件中输入的邮政编码添加到数组中的这个对象中。

到目前为止，我已经尝试过了，但它不起作用，它只是更新为字符串而不是数组：

updateZip(){
return e => this.setState({"locations": [{"zip": e.currentTarget.value}]}) 

}

React 组件：

<input onChange={this.updateZip()} type="text" className="zip-input"/>

如何成功更新状态？

Answer 1

使用 e.target.value 并传递 onChange={this.updateZip}

   class App extends Component {
  state = {
    locations: [{ zip: "" }]
  };
  updateZip = (e) => {
    this.setState({ locations: [{ zip: e.target.value }] });
  };

  render() {
    return (
      <div>
        <input onChange={this.updateZip} type="text" className="zip-input" />
        <p>{this.state.locations[0].zip}</p>
      </div>
    );
  }
}
export default App;

CodeSandBox

Answer 2

尝试用箭头函数替换您的 updateZip 函数。

updateZip = (e) => {
    return e => this.setState({"locations": [{"zip": e.currentTarget.value}]}) }

还有

<input onChange={(e) => this.updateZip(e)} type="text" className="zip-input"/>