我想创建一个表单，该表单从表单中获取输入，并在提交时将其作为javascript对象打印在控制台上。我可以打印除业余爱好部分外的所有字段，其中对象只获取一个选中的值，而不获取其余选中的值。如果有人能帮助我或链接我一个已经解决的类似问题，我将非常高兴。

这是我密码

import React from 'react';
import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './contact.css';
import { json } from 'react-router-dom';
function Contact() {



    const [inputs, setInputs] = useState({});

    const handleChange = (event) => {
        var checkboxes = document.getElementsByName('hobby');
        var hobbies = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked == true) {
                hobbies.push(checkboxes[i].value);
            }
        }
        console.log(hobbies);
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({ ...values, [name]: value }))
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        /* if (inputs != "") {
             console.log(inputs);
             const myJSON = JSON.stringify(inputs);
             // console.log(myJSON);
             setInputs("");
         }*/
        /*var checkboxes = document.getElementsByName('hobby');
        var hobbies = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked == true) {
                hobbies.push(checkboxes[i].value);
            }
        }
        console.log(hobbies);
*/


    }

    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"></input>
                </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"></input>
                    </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"></input>
                    </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"></input>
                </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"></input>
                </div>
                <div className="col mt-2">
                    <label >Hobbies:</label>
                    <div className="form-check">
                        <input className="form-check-input" name="hobby" id='hobbies' type="checkbox" value='cricket' onChange={handleChange} ></input>
                        <label className="form-check-label">
                            Cricket
                        </label>
                    </div>
                    <div className="form-check">
                        <input className="form-check-input" name="hobby" id='hobbies' type="checkbox" value='football' onChange={handleChange} ></input>
                        <label className="form-check-label">
                            Football
                        </label>
                    </div>
                    <div className="form-check">
                        <input className="form-check-input" name="hobby" id='hobbies' type="checkbox" value='reading' onChange={handleChange}></input>
                        <label className="form-check-label">
                            Reading
                        </label>
                    </div>
                    <div className="form-check">
                        <input className="form-check-input" name="hobby" id='hobbies' type="checkbox" value='Dancing' onChange={handleChange} ></input>
                        <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;