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

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

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

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

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