反应 onChange 不更新状态

Posted 2023-02-22

【中文标题】反应 onChange 不更新状态

【英文标题】：React onChange not updating state

【发布时间】：2020-12-28 09:11:28

【问题描述】：

我正在创建一个简单的登录表单，并且我正在保存用户信息以在他们键入时进行说明。但是，该值未按预期注册到状态。

这是用户状态

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 not updating React https://daveceddia.com/usestate-hook-examples/

【问题讨论】：

我建议你每个输入类型都有一个状态

现在状态在哪里？

状态在父组件中

【参考方案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>
    );