用新日期更新表单状态日期
用新日期更新表单状态日期
提问于 2022-06-24 10:43:48
我在表单组件中使用两种不同的状态。一个用于捕获所有文本输入，另一个用于使用Material中的DatePicker组件捕获日期。
我想在我的主输入中添加一个日期状态，并根据日期状态更新它。
下面是我正在使用的代码：
const [date, setDate] = useState(null);
const [inputValues, setInputValues] = useState({
title: "",
category: "",
description: "",
city: "",
venue: "",
date: "",
});
const handleChange = (event) => {
setInputValues({
...inputValues,
[event.target.name]: event.target.value,
date: date,
});
};<TextField
variant="outlined"
label="Event title"
size="small"
fullWidth
name="title" // name references the 'input' element attribute
value={inputValues.title} // value references the 'input' attribute 'value'
onChange={handleChange} // onChange will pass the event by default
></TextField><DatePicker
value={date} // DatePicker requires onChange and value
onChange={(newDate) => setDate(newDate)} // Cannot be set at the TextField level
renderInput={(params) => (
<TextField
{...params}
size="small"
fullWidth
variant="outlined"
></TextField>
)}
></DatePicker>不确定是否需要使用useEffect将这两种状态连接在一起？如有任何指导，将不胜感激。
谢谢!
回答 1
Stack Overflow用户
发布于 2022-06-24 15:33:09
不要试图在更改其他输入的同时更新日期，而是在每次将其包含在效果的依赖数组中。更新日期时都会自动处理它的效果。
在将现有状态数据与新状态数据组合时，还应该使用
setState参数的函数形式(代码中的setInputValues)，以确保不会设置陈旧的数据。 例如：
- 这个：
setState(state => ({...state, someNewValue})) - 而不是：
setState({...state, someNewValue})
import {useEffect, useState} from 'react';
function Component () {
const [date, setDate] = useState(null);
const [inputValues, setInputValues] = useState({
title: "",
category: "",
description: "",
city: "",
venue: "",
date: "",
});
useEffect(() => {
if (typeof date !== 'string') return;
setInputValues(state => ({...state, date}));
}, [date]);
const handleChange = (event) => {
setInputValues(state => ({
...state,
[event.target.name]: event.target.value,
}));
};
// Rest of component...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72742864
复制相关文章
相似问题
腾讯云开发者
