从混合字段反应表单中选中的复选框返回值

Question

理想情况下，我想使用单个handleChanges函数来为表单中的每个字段设置状态。现在，我真的不知道如何做到这一点，因此复选框返回一个特定的值，无论是真还是假，甚至可能是一串"是"或"否"，具体取决于它们是否被切换。我不知道把逻辑放在哪里。

这是我的表单的简化示例：

const ComponentFunction = props => {
const [fields, setFields] = useState({
inputTypeText: "",
textArea: "",
selectDropdown: "",
checkbox: "",
});
const handleChanges = event => {
setField({ ...fields, [event.target.name]: event.target.value }); 
}; 
const submitForm = event => {
event.preventDefault();
props.postForm(fields);
};
return (
<>
<form onSubmit={submitForm}>
<label htmlFor="inputTypeText">Input Type Text</label>
<input
id="title"
type="text"
name="title"
onChange={handleChanges}
value={property.title}
/>
<label htmlFor="textArea">Text Area</label>
<textarea
id="textArea"
rows="4"
cols="50"
name="textArea"
value={property.textArea}
onChange={handleChanges}
/>
<label htmlFor="selectDropdown">Select Dropdown</label>
<select onChange={handleChanges} value={property.selectDropdown} name="selectDropdown" id="select">
<option value="">--Select One--</option>
<option value="Stuff">Stuff</option>
</select>
<label htmlFor="checkbox>Check Box</label>
<input
id="checkbox"
name="checkbox"
type="checkbox"
value={property.checkbox}
onChange={handleChanges}
/>
<button type="submit">Submit</button>
</form>
</>
}

Answer 1

我最终通过为复选框添加一个额外的处理程序来解决这个问题。不确定这是否完全是犹太洁食，但它很干净，效果很好。

这是处理程序：

const handleClick = event => {
setFields({ ...fields, [event.target.name]: (event.target.checked ? "Checked" : "Not Checked") });
}; 

这是复选框：

<label htmlFor="checkbox">Check Box</label>
<input
id="checkbox"
name="checkbox"
type="checkbox"
onClick={handleClick}
/>