如何在 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 
});