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

Question

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

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

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

标签： reactjsreact-hooksreact-state

Answer 1

在提交操作时handleSubmit，您可以arrivalAt使用模板文字设置具有值的状态，例如

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