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

Question

您好，我正在尝试更改isChecked中的签名值。

这是我的 state：

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

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

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

通常我会这样做：

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

但这只有在我的 state 像useState({ producCheckbox: '' })

我会很感激你的帮助。 提前致谢！

Answer 1

您可以 map 之前的 state 并更改更改的 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
}))

Answer 2

您可以在 state 上使用find方法找到目标 object，然后更新isChecked属性，如下所示：

 function Checkbox({name, isChecked, onChange}){ return ( <React.Fragment> <label>{name}</label> <input type="checkbox" name={name} checked={isChecked} onChange={onChange}/> </React.Fragment> ); } function App(){ const [talles, setTalles] = React.useState([ { name: 'S', isChecked: false }, { name: 'M', isChecked: false }, { name: 'L', isChecked: false }, { name: 'XL', isChecked: false }, ]) // Here is the state update const handleChange = ({target: {name,checked} })=> { setTalles(talles => talles.map(t => t.name == name? ({...t, isChecked: checked}): t)) } return (<div> { talles.map(talle => <Checkbox {...talle} onChange={handleChange}/>) } <button onClick={()=> console.log(talles)}>submit</button> </div>); } ReactDOM.render(<App/>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>