如何检查是否所有的复选框在Reactjs检查?

Question

我是新的反应，我得到了一个场景，我有多个复选框在我的形式。我希望用户勾选所有的复选框，然后才启用表单上的提交按钮。在加载时，提交按钮将被禁用。
怎么做?

下面是我到目前为止写的代码:

const MultipleCheckboxes = () => {
const handleChange = () => {
}
const allChecked = () => {
}
return (
<div>
<form>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value="Java"
id="languageChkDefault"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Javascript
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value="Angular"
id="languageChkDefault"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Angular
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value="Python"
id="languageChkDefault"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Python
</label>
</div> <br />
<button disabled={!allChecked}>Submit</button>
</form>
</div>
);
};
export default MultipleCheckboxes;  

有人能帮我一下吗?谢谢你

Answer 1

这是我的解决方案，希望对你有所帮助

import { useState, useEffect } from "react";
const MultipleCheckboxes = () => {
const [allChecked, setAllChecked] = useState(false);
const [checkboxes, setCheckboxes] = useState({
javaCheckbox: false,
angularCheckbox: false,
pythonCheckbox: false
});
function handleChange(e) {
setCheckboxes({
...checkboxes,
[e.target.id]: e.target.checked
})
}
useEffect(() => {
const result = Object.values(checkboxes).every(v => v);
console.log(result);
setAllChecked(result);
}, [checkboxes]);
return (
<div>
<form>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value={checkboxes.javaCheckbox}
id="javaCheckbox"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Javascript
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value={checkboxes.angularCheckbox}
id="angularCheckbox"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Angular
</label>
</div>
<div className="form-check">
<input
type="checkbox"
className="some-class-name-chk"
name="someName"
value={checkboxes.pythonCheckbox}
id="pythonCheckbox"
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor="languageChkDefault"
>
Python
</label>
</div> <br />
<button disabled={!allChecked}>Submit</button>
</form>
</div>
);
};
export default MultipleCheckboxes;

Answer 2

您可以使用react useState钩子并将其默认值设置为false。

const [state, setstate] = useState(false)

当用户单击输入框时，将状态设置为true。当用户取消选中该框时，可能会遇到一些问题，因此可以使用if语句来处理状态更改例如:

if (state === true){
setstate(false)
}else{
setstate(true)
}

或者您可以在handleChange函数中使用以下代码:

!state

它相应地将状态反转为true/false。

之后，你可以在组件中使用一个三元操作符来检查用户是否选中了所有的复选框，如果用户没有选中所有的复选框，禁用按钮或者做其他事情。例如，如果状态为true(或者换句话说，如果用户选中了复选框)，则呈现正常样式的按钮，否则呈现禁用按钮:

{state? <button className = "styled"/>: <button disabled className="styled"/>}

当然，我只检查了一个输入框的状态。现在，您可以通过为每个框声明多个状态来简单地检查多个条件。

{state1 && state2 && state3 ? <button className = "styled"/>: <button disabled className="styled"/>}

如果你还不熟悉三元操作符，你应该阅读这个文档三元操作符。如果你还没有听说过useState和react钩子，请随意查看react的文档。欢迎来到React生态系统!