如何在reactjs中设置表单中复选框的值

Question

我有一个用于筛选搜索的表单。除了其他字段，我还有一个复选框。这就是我处理提交的方式

const [formData, setFormData] = useState({
name: "",
location: "",
schoolName: "",
class: 0,
board: 0,
homeTuition: false,
});
const changeFormData = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const formDataSubmit = (e) => {
e.preventDefault();
console.log(formData);
setFormData({
name: "",
location: "",
schoolName: "",
class: 0,
board: 0,
homeTuition: false,
});
};
<form onSubmit={(e) => formDataSubmit(e)}>
<div className="word">
<input
type="text"
name="name"
id="name"
placeholder="teacher name"
value={formData.name}
onChange={(e) => changeFormData(e)}
/>
</div>
<div className="word">
<input
type="text"
name="location"
id="location"
placeholder="location / area name"
value={formData.location}
onChange={(e) => changeFormData(e)}
/>
</div>
<div className="word">
<input
type="text"
name="schoolName"
id="schoolName"
placeholder="Name of School"
value={formData.schoolName}
onChange={(e) => changeFormData(e)}
/>
</div>
<div className="select-menu">
<select
value={formData.class}
name="class"
id="class"
onChange={(e) => changeFormData(e)}
>
<option value="0" disabled hidden>
Select Class
</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div className="select-menu">
<select
value={formData.board}
name="board"
id="board"
onChange={(e) => changeFormData(e)}
>
<option value="0" disabled hidden>
Select Board
</option>
<option value="mbose">MBOSE</option>
<option value="cbse">CBSE</option>
<option value="icse">ICSE</option>
</select>
</div>
<div className="home-tutor">
<label htmlFor="homeTuition">
Home Tutor
<input
type="checkbox"
name="homeTuition"
id="homeTuition"
value={formData.homeTuition}
onChange={(e) => changeFormData(e)}
/>
<span></span>
</label>
</div>
<div className="submit-button">
<button type="submit">Apply Filter</button>
</div>
</form>

如果勾选其他为false，我想将homeTuition设置为true。但由于我是新反应的人，我不明白在哪里写这个逻辑。

我试着使用一个单独的useState来更改单击时的布尔值，但我知道它不会立即影响target.value。所以请帮助我该怎么做？。

Answer 1

如果您想使用单个处理程序：

const changeFormData = (e) => {
const { name, type } = e.target;
setFormData({
...formData,
[name]: e.target[type === "checkbox" ? "checked" : "value"]
});
};

return (
<input
type="text"
name="schoolName"
id="schoolName"
placeholder="Name of School"
value={formData.schoolName}
onChange={(e) => changeFormData(e)}
/>
<input
type="checkbox"
name="homeTuition"
id="homeTuition"
checked={formData.homeTuition}
onChange={(e) => changeFormData(e)}
/>
);

Answer 2

添加加法函数：

const changeCheckbox = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.checked,
});
};  

更改复选框的输入标签(使用"checked"代替"value"和新功能(：

<input
type="checkbox"
name="homeTuition"
id="homeTuition"
checked={formData.homeTuition}
onChange={(e) => changeCheckbox(e)}
/>