Возвращаемое значение из флажка, проверяемого в форме реакции смешанного поля

Question

В идеале я хочу использовать одну функцию handleChanges, чтобы установить состояние для каждого поля в моей форме. Прямо сейчас я не знаю, как это сделать, чтобы флажки возвращали заданное значение c, истинное или ложное, или, возможно, даже строку "да" или "нет" в зависимости от того, переключены ли они. Я не знаю, где поставить логи c.

Вот упрощенный пример моей формы:

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