ReactJS中的复选框

我不理解ReactJS中的复选框。我发现，但它有一大堆投票结果，每个人都在做其他事情。有些答案使用了

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）//默认未选中
常量handleCheckbox=（val）=>{
setCheckbox（！val）；//切换
console.log（val，复选框）；
}
渲染(
handleCheckbox（e.target.value）}
/>
);

您跳过了他们没有使用e.target.value…：

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

---

这将帮助您了解它是如何工作的

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

const[checkBox，setCheckbox]=useState（false）；
useffect（（）=>{
log（“Hey Checkbox Checked？”，Checkbox）；
}，[复选框]；
常量handleCheckbox=（）=>{
setCheckbox（！checkBox）；
}
返回(
);

每个输入框值将存储在状态中。如果有多个，可以将它们存储在数组中，但由于只有一个，所以可以将其存储在变量中，在您的示例中称为“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} 

---

如果您正在使用函数，我建议使用状态挂钩

将defaultChecked更改为checked会导致抛出非受控输入错误：警告：组件正在更改要控制的类型number的非受控输入。顺便说一句，如果你不打算把e传递给handler函数，你不需要e=>and（），只需要写onChange={handleCheckbox}。在这种情况下，你可以同时使用checked和defaultChecked，只要任何值发生变化，就会切换状态，因此，checked和defaultchecked的值将不需要的回调函数更新为我的答案！是的，但是当我不使用DefaultChecked时，它仍然会抛出错误。这能解决您的问题吗？

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

    
onChange={handleCheckbox}