如何用一个函数更新 React 状态？ [复制]

Posted 2023-02-23

【中文标题】如何用一个函数更新 React 状态？ [复制]

【英文标题】：How to update React states with one function? [duplicate]

【发布时间】：2020-04-22 08:50:34

【问题描述】：

请看下图。

有没有一种方法可以创建一个函数来更新状态，而无需创建三个单独的函数。我希望函数使用 ref 的名称或类名来更新相应的状态及其值。

【问题讨论】：

是的！谢谢！

【参考方案1】：

例如，如果它是一个表单组件，那么：

const Form = () => 
  const [form, setForm] = React.useState();
  const handleChange = e => 
  const name, value = e.target;
  setForm(prevState => (...prevState, [name]: value)); 
  
  return(
  <form>
     <Input
      name="input1"
      value=form.input1
      onChange=handleChange
      />
      <Input
      name="input2"
      value=form.input2
      onChange=handleChange
      />
      // etc...
  )