关于使用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

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

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

还有

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

Answer 2

使用e.target.value并传递Change={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