反應 onChange 不更新狀態

Question

我正在創建一個簡單的登錄表單，並且正在保存用戶信息以在他們鍵入時進行說明。 但是，該值未按預期注冊為狀態。

這是用戶狀態

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

這是輸入組件

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>
    )
}

這里是傳入輸入組件的handleInputChange函數

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

這是在父組件中使用輸入組件之一的方式

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

以下是我迄今為止看過的一些資源：

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

Answer 1

我建議為每個輸入字段創建一個狀態：

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>
    );
}