更新react钩子中的嵌套对象
更新react钩子中的嵌套对象
提问于 2019-11-16 09:04:18
我目前正在尝试实现一个动态+多步表单，并想知道如何更新地图中的映射值。
例如:我有三个字段“名字”、“姓氏”、“电子邮件”。我想要存储在一个名为"General“的键中的名称值，而我想要存储在一个名为"Contact”的键中的电子邮件值。目前，我已经实现了一个名为onChange的方法，该方法提供给每个字段并侦听更改，并将字段及其值存储在状态中。
function App() {
const [state, setState] = useState(false);
const onChange = (field, value) => {
console.log("Values:", value);
setState({
...state,
[field]: value
});
console.log("State:", state);
};
return (
<div className="App">
<EuiForm>
<EuiFormRow label="First Name">
<EuiFieldText
name="first"
onChange={event => onChange("firstName", event.target.value)}
/>
</EuiFormRow>
<EuiSpacer />
<EuiFormRow label="Last Name">
<EuiFieldText
name="last"
onChange={event => onChange("lastName", event.target.value)}
/>
</EuiFormRow>
<EuiSpacer />
<EuiFormRow label="Email">
<EuiFieldText
name="email"
onChange={event => onChange("email", event.target.value)}
/>
</EuiFormRow>
<EuiSpacer />
<EuiButton type="submit" fill>
Save form
</EuiButton>
</EuiForm>
</div>
);
}更新值的正确方法是什么，以便使我的状态中的数据看起来像这样？
{
"general": {
"firstName": "ABCD",
"lastName": "EFGH"
},
"contact": {
"email": "abcd@efgh.com"
}
}Stack Overflow用户
回答已采纳
发布于 2019-11-16 11:13:54
为了简化，您可以定义两种不同的状态，然后在提交时将它们合并。下面是一个示例：
function App() {
const [general, setGeneral] = React.useState({});
const [contact, setContact] = React.useState({});
const onChange = (set, field, value) => {
set(state => ({
...state,
[field]: value
}));
};
const onSubmit = (e) => {
e.preventDefault();
console.log({
general,
contact
});
}
return (
<div className="App">
<form onSubmit={onSubmit}>
<label htmlFor="First Name">First Name
<input
name="first"
onChange={event => onChange(setGeneral, "firstName", event.target.value)}
/>
</label>
<hr />
<label htmlFor="Last Name">Last Name
<input
name="last"
onChange={event => onChange(setGeneral, "lastName", event.target.value)}
/>
</label>
<hr />
<label htmlFor="Email">Email
<input
name="email"
onChange={event => onChange(setContact, "email", event.target.value)}
/>
</label>
<hr />
<button type="submit">
Save form
</button>
</form>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58889116
复制相关文章
相似问题
腾讯云开发者
