组件状态下的组合表单输入值

Question

需要帮助将两个输入值组合到一个状态键。当在 Arrival date 进行更改时，输入可以读取 data.arrivalDate 的新值，分别在 Arrival time 输入可以读取它的来自 data.arrivalTime.

的值

我想要做的是，当单击“提交”按钮时 - 在发送数据之前 - 将来自两个输入的结果组合在一个状态字段中 arrivesAt 以便接收像 2020-01-01/09:05 这样的字符串，所以我根本不需要 data 对象中的旧状态键 data.fromDate & data.fromTime。

这是我的代码： https://codesandbox.io/s/blue-tdd-xesmm?file=/src/App.js

Answer 1

在 handleSubmit 中提交操作时，您可以使用

等模板文字设置具有 arrivalAt 值的状态

  const handleSubmit = event => {
    event.preventDefault();
    setData(prev => ({
      arriveAt: `${prev.fromDate}/${prev.fromTime}`,
    }));
  };

Answer 2

尝试使用 .toUTCString() 函数将您的 Date 对象转换为字符串，并使用 .split() 和 .slice() 之类的东西将它们分割。

然后您可以将它们添加到一起以创建您想要的字符串，然后再将其提交到您想要的位置。

Answer 3

尝试过这种方式，但每次点击提交按钮时都会进入之前的状态，而不是当前状态。我错过了什么？我的代码一开始有点乱所以修正了它。

  const handleChange = event => {
    let target = event.target;
    let value = target.type === "checkbox" ? target.checked : target.value;
    let name = target.name;
    setData(previousData => ({
      ...previousData,
      [name]: value
    }));
    if (target.type == "date" || target.type == "time") {
      setData(previousData => ({
        ...previousData,
        arrivesAt: `${data.arrivalDate} & ${data.arrivalTime}`
      }));
    }
  };

组件状态下的组合表单输入值

Combined form input values in component state

reactjs

react-hooks

react-state