有没有办法更新多个useState（反应钩子）或一个useState（反应挂钩）的多个属性与一个事件处理程序？

Question

我正在处理一个包含2个字段的登录表单。电子邮件和密码。当我使用2 useState代表两个字段时，那么当我用handleChange更新状态时，两个状态都会更新。这不是意图。

   const [email, setEmail] = useState()
   const [password, setPassword] = useState()

    const handleChange = e => {
        const {value} = e.target
        setEmail(value)
        setPassword(value)
    }

我不想使用多个事件处理程序来处理每个输入字段。我试过这个

    const [state , setState] = useState({
        email : "",
        password : ""
    })

    const handleChange = e => {
        const {name , value} = e.target
        setState({
            [name] : value
        })
    }

但这会一次更新一个属性。而其他财产价值也会丢失。那么有什么方法可以用一个事件处理程序更新我的所有输入字段，就像我们可以用有状态组件一样。

    this.state = {
      email : "",
      password : ""
    }

    const handleChange = e => {
        const {name , value} = e.target
        this.setState({
           [name] : value
        })
    }

Answer 1

您应该将setState与回调函数一起使用：

setState(prev => ({ 
    ...prev,
    email: 'new mail',
}))

您将创建一个由先前状态创建的新状态对象。你可以覆盖你需要的任何东西。如果你有一个复杂的状态对象，你需要更多的新对象。

Answer 2

尝试

this.state = {email：“”，密码：“”}

const handleChange = e => {
    const updated = {name , value} = e.target
    const next = {...this.state, ...updated}
    this.setState({next})
}

Answer 3

你可以像这样创建一个自定义钩子：

import React, { useState } from 'react';

export default function App() {
    const username = useFormInput(''); // use it here
    const password = useFormInput(''); // & here...
    return (
        <div>
            <form>
                <input type='text' placeholder='username' {...username} />
                <input type='password' placeholder='password' {...password} />
                <input type='submit' />
            </form>
        </div>
    );
}

// custom hook
function useFormInput (initialValue) {
    const [value, setValue] = useState(initialValue);
    const handleChange = event => {
        setValue(event.target.value);
    };
    return { value, onChange: handleChange };
};

Answer 4

感谢DoğancanArabacı。我试图模仿基于类的组件的state和setState，所以感觉不会改变。我的解决方案看起来像这样

const [state , setState] = useState({
    email : "",
    password : ""
})

const handleChange = e => {
    const {name , value} = e.target
    setState( prevState => {
        ...prevState,
        [name] : value
    })
}

Answer 5

// The useState Hook is used in React,
const {obj, setObj} = useState({ // Initially a value of `{}` object type
  foo: {},
  bar: {}
})

const handle = event => {
  setObj({   // here `{}` is a new value of type object
    ...obj,  // So, first use the ... operator to get the prevState
    bar: { qux: {} } // then, update
  })
}