如何在React中动态创建一个Hook?

时间:2019-10-21 11:24:21

标签: reactjs

我知道我要说的可能是不可能的,但是我想对我在React with Class Components中所做的功能性组件做些什么,

使用类组件,您可以执行以下操作:

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%的人告诉我“不可能”,但我真的想确定,

谢谢

1 个答案:

答案 0 :(得分:2)

这与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被覆盖