数组未通过 reactjs 中的 onChange 处理程序进行更新

Question

我正在尝试将单独输入元素中输入的每个值添加到数组中，该输入元素在 GUI 上单击"添加"按钮时添加

。没有初始数组，所以请不要建议从初始数组的任何映射中放置索引。

当用户在GUI上单击添加按钮时，会添加多个输入元素，下面的方法subDivs((对此进行了解释。

所以我在onChange处理程序中将计数器值作为索引传递，但是此代码不起作用。真的在寻找一些富有成效的投入，也许我错过了一些重要的部分。

handleChange(event, index) {
event.preventDefault();
let { nameArray } = this.state;
nameArray[index] = event.target.value;
this.setState({nameArray}, () => console.log("Array ", nameArray))
}
addRow() {
this.setState({ count: this.state.count + 1 })
};
subDivs() {
let count = this.state.count, uiItems = [];
var { names } = this.state;
let options2 = names.map(name2 => {
return { value: name2.name, label: name2.name };
})
while (count--)
uiItems.push(
<div className="newName" key={this.nextUniqueId()}>
<div className="input-group mb-3" >
<input id={count+1} type="text" className="form-control" placeholder="Enter Name"
onChange={(e) => this.handleChange(e, count+1)}
/>
</div>
</div>
)
return uiItems;
}

Answer 1

可能会有所帮助。

handleChange(event) {
event.preventDefault();
let { nameArray } = this.state;
if (!Array.isArray(nameArray)) nameArray = [];
nameArray.push(event.target.value);
this.setState({nameArray}, () => {
return {
nameArray
};
});
}