React表单技术问题：如何将Hobbies存储为数组并获取全部多选值

你的问题出在复选框的状态处理逻辑上：当前代码虽然遍历了所有复选框，但最终没有将收集到的爱好数组存入state，反而用单个复选框的值覆盖了字段，同时复选框的选中状态也没有和state绑定，导致无法正确维护多选状态。

以下是修复后的完整代码：

import React from 'react';
import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './contact.css';

function Contact() {
    // 初始化state，hobbies设为空数组
    const [inputs, setInputs] = useState({ hobbies: [] });

    const handleChange = (event) => {
        const { name, value, type, checked } = event.target;

        if (type === 'checkbox') {
            // 处理复选框：更新hobbies数组
            setInputs(prev => {
                const currentHobbies = prev.hobbies || [];
                if (checked) {
                    // 选中时添加值，避免重复
                    if (!currentHobbies.includes(value)) {
                        return { ...prev, hobbies: [...currentHobbies, value] };
                    }
                } else {
                    // 取消选中时移除值
                    return { ...prev, hobbies: currentHobbies.filter(item => item !== value) };
                }
                return prev;
            });
        } else {
            // 处理其他普通输入字段
            setInputs(prev => ({ ...prev, [name]: value }));
        }
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        // 打印完整的表单数据对象
        console.log(inputs);
    };

    return (
        <address>
            <form className='container' onSubmit={handleSubmit}>
                <div className="form-row">
                    <label>Firstname:</label>
                    <div className="col mt-2">
                        <input
                            type="text"
                            id='firstname'
                            name="firstname"
                            value={inputs.firstname || ""}
                            onChange={handleChange}
                            className="form-control"
                            placeholder="First name"
                        />
                    </div>
                    <div className="form-row">
                        <div className="col mt-2">
                            <label>Lastname:</label>
                            <input
                                type="text"
                                id='lastname'
                                name="lastname"
                                value={inputs.lastname || ""}
                                onChange={handleChange}
                                className="form-control"
                                placeholder="Last name"
                            />
                        </div>
                    </div>
                    <div className="form-row">
                        <div className="col mt-2">
                            <label>Age:</label>
                            <input
                                type="number"
                                id='age'
                                name="age"
                                value={inputs.age || ""}
                                onChange={handleChange}
                                className="form-control"
                                placeholder="Age"
                            />
                        </div>
                    </div>
                    <div className="col mt-2">
                        <label>Height:</label>
                        <input
                            type="number"
                            step="any"
                            id='height'
                            name="height"
                            value={inputs.height || ""}
                            onChange={handleChange}
                            className="form-control"
                            placeholder="Height"
                        />
                    </div>
                    <div className="col mt-2">
                        <label>Gender:</label>
                        <input
                            type="text"
                            maxLength='1'
                            name="gender"
                            value={inputs.gender || ""}
                            onChange={handleChange}
                            id='gender'
                            className="form-control"
                            placeholder="Gender"
                        />
                    </div>
                    <div className="col mt-2">
                        <label>Hobbies:</label>
                        <div className="form-check">
                            <input
                                className="form-check-input"
                                name="hobby"
                                id='cricket'
                                type="checkbox"
                                value='cricket'
                                onChange={handleChange}
                                checked={inputs.hobbies.includes('cricket')}
                            />
                            <label className="form-check-label">Cricket</label>
                        </div>
                        <div className="form-check">
                            <input
                                className="form-check-input"
                                name="hobby"
                                id='football'
                                type="checkbox"
                                value='football'
                                onChange={handleChange}
                                checked={inputs.hobbies.includes('football')}
                            />
                            <label className="form-check-label">Football</label>
                        </div>
                        <div className="form-check">
                            <input
                                className="form-check-input"
                                name="hobby"
                                id='reading'
                                type="checkbox"
                                value='reading'
                                onChange={handleChange}
                                checked={inputs.hobbies.includes('reading')}
                            />
                            <label className="form-check-label">Reading</label>
                        </div>
                        <div className="form-check">
                            <input
                                className="form-check-input"
                                name="hobby"
                                id='dancing'
                                type="checkbox"
                                value='Dancing'
                                onChange={handleChange}
                                checked={inputs.hobbies.includes('Dancing')}
                            />
                            <label className="form-check-label">Dancing</label>
                        </div>
                    </div>
                    <div className='col mt-2'>
                        <button type="submit" className="btn btn-primary" id='jsonbtn'>Submit</button>
                    </div>
                </div>
            </form>
            <p id='demo'></p>
        </address>
    );
}

export default Contact;

关键修改说明： #

• State初始化：给inputs添加hobbies字段并初始化为空数组，专门存储选中的爱好
• 复选框处理逻辑：在handleChange中判断输入类型为checkbox时，根据选中状态添加/移除对应值到hobbies数组，避免重复添加
• UI状态绑定：每个复选框添加checked属性，绑定到inputs.hobbies是否包含对应值，确保UI显示与state同步
• 提交逻辑：在handleSubmit中直接打印inputs，即可看到包含所有选中爱好的完整表单数据对象

内容的提问来源于stack exchange，提问作者joel noronha