javascript - 反应 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/

标签： javascriptreactjsreact-hooks

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