我在使用react处理复选框时遇到问题,我想要的是状态应该反射(reflect)复选框的条件,最后我想要[id-1, id-2, id-3 ]
保存到后端。但我的演示似乎坏了,我想我错过了一个条件,但我不知道我的问题是什么。
<强> https://codesandbox.io/s/kpw23v4xv
handleCheckboxChange = (device_id) => {
const upateStatOfZoneCameraMenu = () => {
this.setState({
zones: [...this.state.zones.slice(0, this.state.selectedTab), {
...this.state.zones[this.state.selectedTab],
cameras: [
...this.state.zones[this.state.selectedTab].cameras.map(
o => ({
...o,
checked: this.state.selectedCameras.find(o2 => o2 === o.device_id) || o.device_id === device_id
})
)
]
}, ...this.state.zones.slice(this.state.selectedTab + 1)]
})
}
const updatedSelectedCamera = this.state.selectedCameras.find(obj => obj === device_id)
if (!updatedSelectedCamera) {
this.setState({
selectedCameras: [...this.state.selectedCameras, device_id]
}, () => {
upateStatOfZoneCameraMenu()
})
} else {
this.setState({
selectedCameras: this.state.selectedCameras.filter(obj => obj !== device_id)
}, () => {
upateStatOfZoneCameraMenu()
})
}
}
我认为问题出在第 52 行。
最佳答案
您的逻辑问题在于设置相机的checked
状态。
我已将现有代码更改为:
checked: this.state.selectedCameras.find(o2 => o2 === o.device_id) !==undefined
您的代码中还存在关于您迭代创建的元素中不存在键的警告,我通过向 map 方法呈现的 div 添加一个键在 App 组件中修复了该问题。
将不受控组件更改为受控组件时出现另一个警告,当我在相机的初始状态中引入 checked
字段并将其设置为 false 时,该警告已修复。
详细代码可见here .
关于javascript - 将复选框与 React 中的嵌套对象数组绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47111210/