reactjs - 在 React.useState 中保存对象

Question

我在我的react项目中有一个表单，我希望每个字段的值都存储在状态中。而不是每个字段都有多个状态，我如何将表单值存储为状态中的对象？更重要的是我如何访问它？ (带有反应钩子(Hook))

import React from 'react';

export const UserData = () => {
  return(
     <form>
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
        <button>Confirm</button>
     </form>
  )
}

Answer 1

React Hooks 允许您使用 useState 定义 JavaScript 对象。看 https://daveceddia.com/usestate-hook-examples/

function LoginForm() {
   const [form, setState] = useState({
   username: '',
   password: ''
});

使用函数更新表单:

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

调用按钮的onSubmit函数

<form onSubmit={updateField}>
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <Button >Confirm</button>
</form>