我有一个根据数组中的项目数生成的输入列表:
const itemInputs = items.map(
item => <Input key={item} value={itemInput} onChange={event => this.updateItem(event)} />,
);
这是我的 updateItem 函数的样子:
updateItem(event) {
this.setState({
itemInput: event.target.value,
});
}
因此,如果我的数组中有两项,则会生成两个输入字段,如下所示:
但是当我为第一个输入字段输入一个值时,相同的值会出现在第二个输入字段中,如下所示:
如何防止这种情况发生?我希望每个输入字段保留自己的值。
最佳答案
这是一种方法
const items = ['firstName', 'lastName'];
const itemInputs = items.map(
name => <Input key={name} name={name} value={this.state[name]} onChange={event => this.updateItem(name, event)} />,
);
updateItem = (name, event) => {
this.setState({ [name]: event.target.value });
}
关于javascript - 如何在 React 中分隔输入字段值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56121389/