Question

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

  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 });
  };

Answer 1

将firstName和lastName都合并为一个状态，并根据event.target.name设置每个属性。传播运算符保留当前状态，并用传入的更新覆盖。

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

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

如何使用带有useState

1 个答案: