如何在 React 中动态创建 Hook？

Question

我知道我要说的可能是不可能的，但我想用函数组件做一些事情，就像我在 React 中使用类组件所做的那样，

使用类组件，您可以这样做：

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

this.state."e.target.name" 是使用 e.target.name 的值动态创建的，

但是如何在功能组件（钩子）中，根据输入名称的值动态设置钩子？

会是这样的（不要大喊大叫，我知道这做不到 :D）：

function handleChange(e) {
  set`${e.target.name.toUpperCase()`(e.target.value);
}

我知道有 99% 的人告诉我“这是不可能的”，但我真的很想确定，

谢谢

Answer 1

这与hooks 本身无关，更多的是关于你如何定义你的state。您可以像这样使用useState 重现您想要的行为

const Component = () =>{
    const [state, setState] = useState({})

    const onChange = e =>{
        const { target: {value, name } } = e

        setState(prev =>({
            ...prev,
            [name] : value
        }))
    }

} 

现在如果state[name] 是undefined，则添加一个新属性，如果state[name] 已经定义，则覆盖旧的value