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

到目前为止，我已经看过一些资源：

Answer 1

我建议为每个输入字段创建一个状态：

row

反应onChange不更新状态

1 个答案: