我知道我要说的可能是不可能的,但我想用我在 React 中使用类组件所做的功能组件做一些事情,
使用类组件,您可以执行以下操作:
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
Run Code Online (Sandbox Code Playgroud)
this.state."e.target.name" 是使用 e.target.name 的值动态创建的,
但是在功能组件(钩子)中,如何根据输入名称的值动态设置钩子?
它会是这样的(别喊,我知道这是不可能的:D):
function handleChange(e) {
set`${e.target.name.toUpperCase()`(e.target.value);
}
Run Code Online (Sandbox Code Playgroud)
我知道 99% 的人都告诉我“这不可能”,但我真的很想确定,
谢谢
这与它本身无关hooks,更多的是你如何定义你的state. useState您可以像这样重现您想要的行为
const Component = () =>{
const [state, setState] = useState({})
const onChange = e =>{
const { target: {value, name } } = e
setState(prev =>({
...prev,
[name] : value
}))
}
}
Run Code Online (Sandbox Code Playgroud)
现在,如果state[name]添加undefined了新属性,如果state[name]已经定义了旧属性,value则覆盖旧属性
| 归档时间: |
|
| 查看次数: |
6918 次 |
| 最近记录: |