我正在尝试使用两种方式绑定以在 React 中为嵌套数组工作。我让它为部门名称工作,这是一个简单的单一输入。问题是当我尝试在 handleInputChangeArray 中为我的团队数组设置状态时。应用程序中断,我收到一条错误消息,指出 this.state.team.map 不是函数。
constructor(props) {
super(props);
this.state = {
departmentName: '',
team: [
{
name: '',
title: '',
salary: '',
}
]
}
]
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleInputChangeArray = this.handleInputChangeArray.bind(this);
}
这是我的两个功能:
handleInputChangeArray(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState(({team}) => ({team: {
...team,
[name]: value,
}}))
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
此输入与我的 handleInputChange 完美配合
<input className="form-control" name=“departmentName” defaultvalue={this.state.departmentName} onChange={this.handleInputChange} type="text" />
这不起作用:
{this.state.team.map(( listValue, index ) => {
return (
<td key={index}>
<input type="text" className="form-control" name="listValue.name" defaultValue={listValue.name} onChange={this.handleInputChangeArray} />
</td>
);
})}