javascript - 获取选定的值下拉列表 React useSate

问题描述

最初，我将此组件设计为为每个单独的输入提供一个 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;

谢谢，肖恩

标签： javascriptreactjsuse-state

javascript - 获取选定的值下拉列表 React useSate

问题描述

解决方案

推荐阅读