Question

我在控制反应输入元件方面遇到麻烦。在类组件中，我们以前在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
}

Answer 1

使用钩子实现此目的的一种方法可能是将所有输入值置于一个状态，就像您以前所做的那样。

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 })

Answer 2

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

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}）。

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

2 个答案: