ReactJS中的复选框 - 编程之家

如何解决ReactJS中的复选框

我不明白ReactJS中的复选框。我找到了this question，但在每个人都在做其他事情的情况下，它得到了很多好评。一些答案使用checked={isCheckedState}，但是对我来说却引发了不受控制的输入错误。其他用法defaultChecked，可删除不受控制的错误，但复选框不会更改。有些没有value属性，但是当我没有该属性时，e.target.value总是返回字符串“ on”。

有人可以向我解释在ReactJS中如何真正处理复选框吗？

const [checkBox,setCheckBox] = useState(false); //default unchecked


const handleCheckBox = (val) => {
    setCheckBox(!val); //toggle
    console.log(val,checkBox);
}

render(
            <input 
                id="check"
                type="checkBox"
                value={checkBox} //if I remove this,"val" always contains "on"
                defaultChecked={checkBox}
                onChange={e => handleCheckBox(e.target.value)} 
            />
);

解决方法

这将帮助您了解其工作原理！

    const [checkBox,setCheckbox] = useState(false);

    useEffect(() => {
        console.log("Hey Checkbox Checked ?",checkBox);
    },[checkBox]);

    const handleCheckbox = () => {
        setCheckbox(!checkBox);
    }

    return (
        <input
            id="check"
            type="checkbox"
            checked={checkBox}
            onChange={handleCheckbox}
        />
    );

您跳过了他们没有使用e.target.value ...的事实：

<input 
    id="check"
    type="checkbox"
    checked={checkBox} //if I remove this,"val" always contains "on"
    onChange={e => handleCheckbox(!checkBox)} 
/>

此外，您可以这样使用checked而不是value：

onChange={e => handleCheckbox(e.target.checked)}

每个输入框的值都将存储在该状态下。如果有很多，可以将它们存储在一个数组中，但是由于只有一个，因此可以将其存储在一个变量中，在本例中称为“ checkBox”

现在是其中的更新部分。大多数人所做的就是将新商品设置为与新状态相反的状态。

带有状态钩子

onChange={() => setChecked(!checkBox)}

带课程

onChange={() => this.setState({
      checkBox: !this.state.checkBox,});}

您还可以使用事件

  const handleCheckbox = (event) => {
    if (event.target.value === "true") {
      setCheckbox(false); //toggle
    } else {
      setCheckbox(true); //toggle
    }
    console.log(event.target.value,checkBox);
  };

    
onChange={handleCheckbox}

如果您使用的是函数，建议使用状态挂钩