reactjs 按键React功能组件更新状态

mv1qrgav  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(175)

在Component类中,我发现创建一个处理程序来处理表单输入很容易,通过将输入名称与this.state.key匹配,我可以使用同一个onChange处理程序更新特定的状态变量:

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

现在我正在使用函数组件,并且我已经将我的状态扁平化了,我希望能够做同样的事情,而不是为handleNameOfEveryInputOnMyForm编写一个函数。我唯一的选择是将我需要访问的状态变量放入一个对象中吗?然后经历更新深层状态变量的所有麻烦?

w8f9ii69

w8f9ii691#

您可以使用函数更新模式,其中您向useState的setter提供函数,而不是直接提供值。
这允许你访问当前状态,然后用一个特定的键覆盖对象,你可以在object spread operator ...的帮助下完成。
你可以用useState()钩子示例化你的基态和一个空对象。

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

function handleCheck = (e) => {
  setState(previousState => {
    return {
      // Spread the previous state
      ...previousState,

      // Overwrite specific key with new value
      [e.target.name]: e.target.value,
    };
  });
};

如果您destructuree.target并将返回的对象用括号括起来,以利用箭头函数的隐式返回,则可以进一步简化它:

function handleCheck = (e) => {
  const { name, value } = e.target;
  setState(previousState => ({
    ...previousState,
    [name]: value,
  }));
};

相关问题