带有 useState 子对象的文本输入答案

【问题标题】：Text input with useState object child带有 useState 子对象的文本输入
【发布时间】：2020-01-17 19:55:26
【问题描述】：

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

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>

【问题讨论】：

标签： reactjs input state

【解决方案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>

【讨论】：

非常感谢克里斯托弗，鉴于也有解决方案，我正计划提取逻辑，但没有考虑使用 name 属性。非常有效！