使用 useState 钩子的输入元素的 onChange 属性答案

【问题标题】：input element's onChange property using useState hook使用 useState 钩子的输入元素的 onChange 属性
【发布时间】：2020-06-21 18:36:03
【问题描述】：

我在使用受控反应输入元素时遇到问题。在类组件中，我们曾经在onChange 上有这样的处理程序：

  handleChange(event) {
    const { name, value } = event.targeet
    this.setState({
      [name]: value
    });
  }

但是在钩子中，我如何实现相同的效果？这里没有定义name 属性。

import React, { useState } from "react"

function App() {
  const [inputValue, setValue] = useState("reactjs")
  
  return (
    <div>
      <input
        value={inputValue}
        onChange= 
      />
    </div>
  )

  export default App
}

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

您需要将状态存储在一个对象中，如下所示：

import React, { useState } from "react"

function App() {
    const [state, setState] = useState({})

    function handleChange(event) {
        const { name, value } = event.target
        setState({
            ...state,
            [name]: value
        })
    }
    
    return (
        <div>
            <input
                name="input1"
                value={state["input1"]}
                onChange={handleChange}
            />
            <input
                name="input2"
                value={state["input2"]}
                onChange={handleChange}
            />
        </div>
    )
}

注意，setState 将设置整个状态，而不是与现有状态合并，因此您必须明确地将新状态与旧状态合并 ({...state, [name]: value})。

【讨论】：

【解决方案2】：

使用钩子实现此目的的一种方法是将所有输入值置于单一状态，就像您过去那样。

function App() {
  const [inputsValue, setValues] = useState({})
  
  return (
    <div>
      <input
        value={inputsValue[name]}
        onChange={({ target: { name, value }}) => setValues(old => { ...old, [name]: value })}
      />
    </div>
  )

  export default App
}

然后您可以通过解构 odl 状态值并使用计算属性修改您想要的值来设置特定值：

setValues(old => { ...old, [name]: value })

【讨论】：