在Component类中,我发现创建一个处理程序来处理表单输入很容易,通过将输入名称与this.state.key匹配,我可以使用同一个onChange处理程序更新特定的状态变量:
handleCheck = event => {
this.setState({ [event.target.name] : event.target.value})
};
现在我正在使用函数组件,并且我已经将我的状态扁平化了,我希望能够做同样的事情,而不是为handleNameOfEveryInputOnMyForm编写一个函数。我唯一的选择是将我需要访问的状态变量放入一个对象中吗?然后经历更新深层状态变量的所有麻烦?
1条答案
按热度按时间w8f9ii691#
您可以使用函数更新模式,其中您向
useState
的setter提供函数,而不是直接提供值。这允许你访问当前状态,然后用一个特定的键覆盖对象,你可以在object spread operator
...
的帮助下完成。你可以用
useState()
钩子示例化你的基态和一个空对象。如果您destructure
e.target
并将返回的对象用括号括起来,以利用箭头函数的隐式返回,则可以进一步简化它: