Reactjs 如何使用带有useState的功能组件获取输入值

使用基于类的组件时，我只需执行以下操作即可获得所有字段输入：

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

然后在实际的表单元素中，我有：

onChange={this.handleChange}

我现在使用的是一个功能组件，它看起来并不那么容易

必须为每个表单输入添加不同的onChange处理程序是一件痛苦的事情，例如：

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
onChange={event => setFirstName(event.target.value)}
onChange={event => setLastName(event.target.value)}
onChange={event => setEmail(event.target.value)}

是否有一种使用功能组件实现以下目标的方法

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

---

将firstName和lastName合并为一个状态，并基于event.target.name设置每个属性。spread操作符保留当前状态，并用传入的更新进行覆盖

const [name, setName] = useState({
  first: '',
  last: ''
});    

handleChange = event => {
  setName({
    ...name, 
    [event.target.name]: event.target.value
  });
};