使用 useState 挂钩检查输入时如何更改状态值

Question

我正在尝试在选中复选框时更改 isChecked 的值。

这是我的状态：

const [talles, setTalles] = useState([
      { name: 'S', isChecked: false },
      { name: 'M', isChecked: false },
      { name: 'L', isChecked: false },
      { name: 'XL', isChecked: false },
])

对于处于此状态的每个元素，都会创建一个 <input type="checkbox" />。

问题是我想动态更改isChecked 属性。

通常我会这样做：

setProduct({
       ...product,
       [e.target.name]: e.target.checked
})

但这只有在我的状态像 useState({ productCheckbox: '' }) 时才有效

感谢您的帮助。提前致谢！

Answer 1

您可以映射以前的状态并更改更改的 talle 的值：

setTalles(previousState => previousState.map(talle => {
  if (talle.name === e.target.name) return ({
    ...talle,
    isChecked: e.target.checked,
  })
  return talle
}))

或相同但更短：

setTalles(previousState => previousState.map(talle =>
  talle.name === e.target.name ?
    ({
      ...talle,
      isChecked: e.target.checked,
    })
    :
    talle
}))