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

【问题标题】：Combined form input values in component state组件状态下的组合表单输入值
【发布时间】：2020-05-31 12:09:11
【问题描述】：

在一个状态键上组合两个输入值时需要帮助。在到达日期输入进行更改时，可以在data.arrivalDate 处读取新值，而在到达时间输入处进行更改时，可以分别从data.arrivalTime 处读取它的值。

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

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

【问题讨论】：

为什么需要新状态却不能使用`${data.fromDate}/${data.fromTime}`？

标签： reactjs react-hooks react-state

【解决方案1】：

在handleSubmit 中提交操作时，您可以使用模板文字（如

）使用arrivalAt 值设置状态

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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}`
      }));
    }
  };

【讨论】：