反应 onChange 不更新状态

Question

I am creating a simple login form and I am saving the users information to state as they type. However, the value does not register to state as expected.

Here is the user state

const [user, setUser] = useState({
    firstName: '',
    lastName: '',
    email: ''
});

Here is the input component

export function Input({ id, placeholder, autoComplete, type, name, label, value, handleInputChange }) {
    return (
        <div className="form-input">
            <label className="form-label" htmlFor={id}>{label}</label>
            <input
                placeholder={placeholder}
                autoComplete={autoComplete}
                id={id}
                type={type}
                name={name}
                value={value}
                onChange={handleInputChange}
            />
        </div>
    )
}

Here is the handleInputChange function that is passed into the input component

function handleInputChange(event) {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
}

Here is how one of the input components is used in the parent component

<Input
    id="first-name"
    placeholder="Charlie"
    autoComplete="given-name"
    type="text"
    name="firstName"
    label="First Name"
    value={user.firstName}
    handleInputChange={handleInputChange}
 />

Here are some resources I've looked at thus far:

• https://reactjs.org/docs/hooks-reference.html#usestate
• onChange not updating React
• https://daveceddia.com/usestate-hook-examples/

Answer 1

I'd suggest to create one state per input field:

export function Form({ addItem }) {
    const [name, setName] = useState('');

    return (
        <form>
            <Input
                id="first-name"
                placeholder="Charlie"
                autoComplete="given-name"
                type="text"
                name="firstName"
                label="First Name"
                value={user.firstName}
                handleInputChange={(event) => setName(event.target.value)}
            />
        </form>
    );
}