我正在映射一个数组,并为每个元素添加一个复选框。复选框具有“已检查”属性,并根据状态切换它。但是当我点击一个复选框时,它会切换所有复选框。如何切换单个复选框?
let respondent = data.map((item, idx) => {
const { personalData, status_id } = item
return (
<div key={idx} className="respondents-list_item">
<Checkbox
onClick={() => this.addCheckedToArray(status_id)}
checked={isChecked}
/>
<div className="respondents-line">
<div>
{personalData.name}
</div>
</div>
</div>
)
})
addCheckedToArray(id) {
const { arrayOfStatusId } = this.state
this.setState({
isChecked: !this.state.isChecked
})
if (arrayOfStatusId.includes(id)) {
let index = arrayOfStatusId.indexOf(id)
arrayOfStatusId.splice(index, 1)
} else {
arrayOfStatusId.push(id)
}
}
看起来你对状态有点困惑,你必须在你的状态跟踪检查项目列表并更新数组不仅是isChecked值,在你的情况下,每个项目都会切换到一起,他们正在寻找相同的属性切换
let respondent = data.map((item, idx) => {
const { personalData, status_id } = item
return (
<div key={idx} className="respondents-list_item">
<Checkbox
onClick={() => this.addCheckedToArray(status_id)}
checked={this.isChecked(status_id)}
/>
<div className="respondents-line">
<div>
{personalData.name}
</div>
</div>
</div>
)
})
isChecked = (id) =>{
return this.state.arrayOfStatusId.includes(id)
}
addCheckedToArray(id) {
let newState = {...this.state}
if (newState.arrayOfStatusId.includes(id)) {
let index = newState.arrayOfStatusId.indexOf(id)
newState.arrayOfStatusId.splice(index, 1)
} else {
newState.arrayOfStatusId.push(id)
}
this.setState({
...newState
})
}