如何在 reactjs 中同时使用“event.target.value”和“event.target.checked”？

Question

我的输入字段很少，很少是文本类型，很少是类型复选框，我现在如何将所有字段值放在一起，我一次只能输入一个，如下例所示：-

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

我不能同时使用两者。 它出什么问题了？

感谢你付出的努力！

Answer 1

您可以使用无效合并运算符：

this.setState({ [event.target.name]: event.target.checked ?? event.target.value });

或显式测试属性是否存在：

if('checked' in event.target) {
    this.setState({ [event.target.name]: event.target.checked });
}

if('value' in event.target) {
    this.setState({ [event.target.name]: event.target.value});
}

Answer 2

根据输入类型属性，您可以有一个条件语句。 checked的属性仅与<input type=checkbox />一起使用

this.setState({ [event.target.name]: 
  event.target.type === 'checkbox' 
    ? event.target.checked 
    : event.target.value 
});