我的react项目中有一个表单，我希望每个字段的值都存储在状态中。不是每个字段都有多个状态，我如何将表单值存储为状态中的对象？更重要的是我如何访问它？（带有react-hooks）
import React from 'react';
export const UserData = () => {
return(
<form>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<button>Confirm</button>
</form>
)
}
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>
你可以使用useState钩子。检查这个
const [state, setState] = useState({ name, email });
要设置类似于setState基于类的组件的状态：
setState({name: 'react', email: 'react'})
要访问状态值：
import React, { useState } from 'react';
export const UserData = () => {
const [state, setState] = useState({ name, email });
return(
<form>
<input type="text" placeholder="Name" value={state.name} />
<input type="email" placeholder="Email" value={state.email} />
<button>Confirm</button>
</form>
)
}
如果您想使用 将表单值存储为对象useState，您应该创建一个初始状态值，以便您可以在出错后回滚到初始状态。例子，
const initialState = {
name: "",
email: ""
};
export const UserData = () => {
const [formState, setFormState] = useState(initialState);
const submitHandler = event => {
event.preventDefault();
console.log(formState);
};
return (
<form onSubmit={submitHandler}>
<input
type="text"
placeholder="Name"
value={formState.name}
onChange={e => {
setFormState({ ...formState, name: e.target.value });
}}
/>
<input
type="email"
placeholder="Email"
value={formState.email}
onChange={e => {
setFormState({ ...formState, email: e.target.value });
}}
/>
<button>Confirm</button>
</form>
);
};
在codeandbox 中工作演示。