Question

我有一堆输入字段，而不是拥有多个状态来管理每个字段；我想要一个状态对象：

const [myObj, setMyObj] = useState({ icon: '', name: '', something: '', another: '' })

我尝试了以下操作，但似乎没有更新状态：

<input 
    type='text'
    value={myObj.name}
    onChange={e => {
      let temp = myObj
      temp.name= e.target.value
      setMyObj(temp)
    }}>
</input>

Answer 1

它似乎没有更新，因为您正在进行状态突变。为了使React能够正确地重新渲染并反映您的更改，您需要通过状态更新器函数传入一个全新的状态对象。

我想最快，最脏的方法就是使用散布运算符为状态对象创建浅表副本：

<input 
    type='text'
    value={myObj.name}
    onChange={e => {
      let temp = {...myObj}
      temp.name= e.target.value
      setMyObj(temp)
    }}>
</input>

但是在事件侦听器中定义所有逻辑实际上并不是最好的方法。

您应该做的是将逻辑提取到单独的事件处理程序中，如下所示：

handleChange = (e) => {
   let newState = {...myObj}
   let { name, value } = e.target
   newState[name] = value
   setMyObj(newState)
}

然后在您的输入中，为其提供一个name属性，该属性与属于该状态的键相关联。并为该事件监听器分配事件处理程序。

<input 
    type='text'
    value={myObj.name}
    name="name"
    onChange={handleChange}>
</input>

使用useState对象子级的文本输入

1 个答案: