获取所选值下拉菜单 React useSate

Question

最初，我将这个组件设计为每个输入都有一个 useState。 在意识到这不是添加新输入的最佳方法后，我重构为仅使用一个 useState。 我能够获得所有人的价值，但性别。 我希望有人能指出我正确的方向。

注意：我意识到它没有获得价值，因为我没有使用 person.gender。 我继续尝试为每个输入添加 value={person.gender = "the value I want"} 。

const Forms = () => {
    const [person, setPerson] = useState({
        firstName: "",
        lastName: "",
        age: "",
        gender: "",
        email: "",
    });

    const [people, setPeople] = useState([]);

    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setPerson({ ...person, [name]: value });
    };
    const handleSubmit = (e) => {
        e.preventDefault();
        if (person.firstName && person.lastName && person.age && person.email) {
            const newPerson = {
                ...person,
                id: new Date().getTime().toString(),
            };
            setPeople([...people, newPerson]);
            setPerson({
                firstName: "",
                lastName: "",
                age: "",
                gender: "",
                email: "",
            });
        }
    };
    console.log(person.gender);
    return (
        <article>
            <h2>Forms</h2>
            <form className="form">
                <div className="form-control">
                    <label htmlFor="firstName">First Name:</label>
                    <input
                        type="text"
                        id="firstName"
                        name="firstName"
                        value={person.firstName}
                        onChange={handleChange}
                    />
                </div>
                <div className="form-control">
                    <label htmlFor="lastName">Last Name:</label>
                    <input
                        type="text"
                        id="LastName"
                        name="lastName"
                        value={person.lastName}
                        onChange={handleChange}
                    />
                </div>
                <div className="form-control">
                    <label htmlFor="age">Age:</label>
                    <input
                        type="text"
                        id="age"
                        name="age"
                        value={person.age}
                        onChange={handleChange}
                    />
                </div>
                <div className="form-control">
                    <label htmlFor="gender">Gender:</label>
                    <select onChange={handleChange} id="gender">
                        <option name="gender" value="male">
                            Male
                        </option>
                        <option name="gender" value="female">
                            Female
                        </option>
                        <option name="gender" value="prefer not to answer">
                            prefer not to answer
                        </option>
                    </select>
                </div>
                <div className="form-control">
                    <label htmlFor="email">Email:</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        value={person.email}
                        onChange={handleChange}
                    />
                </div>
                <button type="submit" className="btn" onClick={handleSubmit}>
                    Submit
                </button>
            </form>
            {people.map((person) => {
                const { firstName, lastName, age, gender, email, id } = person;
                return (
                    <div className="item" key={id}>
                        <h4>
                            {firstName} {lastName}
                        </h4>
                        <span>{age}</span>
                        <span>{gender}</span>
                        <p>{email}</p>
                    </div>
                );
            })}
        </article>
    );
};

export default Forms;

谢谢，肖恩

Answer 1

你必须为 select 元素提供 name 属性，而不是它的选项

<select name="gender" onChange={handleChange} id="gender">

Answer 2

尝试阅读有关表单的反应文档

https://reactjs.org/docs/forms.html

另一件事我认为 e.target.value 在选择表单中不起作用，你也应该为每个表单输入使用独立的状态，因为在这一层你会产生一些效果并重新渲染