如何使用 useState 设置状态并在 React 的 onChange 中执行其他操作？答案

【问题标题】：How to set state using useState and do something else as well in onChange in React?如何使用 useState 设置状态并在 React 的 onChange 中执行其他操作？
【发布时间】：2022-02-08 20:29:47
【问题描述】：

我有一个组件，其中包含另一个组件（来自 headlessui/react），定义如下：

export default function MyComponent(props) {
  const [selectedState, setState] = useState('');
  return (
    <div>
      <RadioGroup value={selectedState} onChange={setState}>
      ...
      </RadioGroup>
    </div>
  )
}

在onChange 中，我想先调用一个函数来做某事，然后调用setState。但是，无论我尝试什么，我都无法让它工作。

我试过了：

onChange={() => {
  doSomethingFirst();
  return setState;
}

onChange={() => {
  doSomethingFirst();
  // This requires an argument and I'm not sure what the argument should be
  setState();
}

// Even this fails
onChange={() => setState;}

我该怎么做才能让它工作？

【问题讨论】：

你能把代码粘贴到codesandbox并分享链接吗

标签： reactjs typescript react-hooks next.js use-state

【解决方案1】：

当您将onChange 直接传递给RadioGroup 时，它将使用RadioGroup 提供的任何参数调用您的setState。因为setState 只接受一个参数，因此等于做onChange={arg => setState(arg)}，它已经展示了如何完成你想要做的事情。只需模拟这种确切的行为并添加您的函数调用：

onChange={arg => {
  doSomethingHere()
  return setState(arg)
}}

【讨论】：

非常感谢。这正是我想要的。我被这个论点难住了；当我把它作为onChange={setState} 时，似乎我没有通过任何东西。
很高兴我能帮上忙！我知道你的意思，将函数作为参数传递有时可能违反直觉。

【解决方案2】：

这应该可行。

export default function MyComponent(props) {
  const [selectedState, setState] = useState('');

  const updateState = (ev)=> {
    doSomethingHere();
    ...
    setState()
  }
  
  return (
    <div>
      <RadioGroup value={selectedState} onChange={updateState}>
        ...
      </RadioGroup>
    </div>
  );
}

ev 传递给 updateState 函数的对象包含 <RadioGroup> 元素。您可以使用 console.log 检查它以查看它包含哪些值。

如果您尝试根据 RadioGroup 值更新状态，您必须能够在 ev 对象中读取该值。

【讨论】：