使用新日期更新表单状态日期

Question

我在形式组件中使用了两个不同的状态。一个用于捕获所有文本输入，另一个是使用材料UI的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>

不确定我是否需要使用使用将两个状态链接在一起？任何指导都将不胜感激。

谢谢！

Answer 1

与其尝试更改其他输入的同时更新日期，不如会在每次通过

当将现有状态数据与新状态数据相结合时，您还应将参数的功能形式用于setState（setInputValues） 't设置过时的数据。

例如

• this：setState（state =＆gt;（{... state，somenewvalue}））
• 而不是：setState（{... state，somenewvalue}）

Code in TypeScript Playground

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...
}