如何在 JSON 表单中添加日期值？ [附上片段]

Question

我正在制作一个包含基本详细信息和就业详细信息部分的表单。

表格几乎完成了，我也可以为不同的部分形成一个 JSON 结构。

完整的工作示例在这里：https://codesandbox.io/s/nextjs-css-only-carousel-forked-v7gg0

现在对于就业详情部分，我需要将开始日期和结束日期作为输入字段。

所以我制作了一个自定义的月份和年份选择器，并在组件中包含与 monthpicker.js 相同的内容。

从就业详情部分，我使用代码调用了该组件，

        <MonthPicker
          value={month}
          name="startDate"
          label="Start Date"
          onChange={setMonth}
        />

使用下面的代码，更新选中的值，

  const [month, setMonth] = useState(
    `${`0${new Date().getMonth() + 1}`.slice(-2)}/${new Date().getFullYear()}`
  );

但我可以理解这是需要更改的地方，但我不确定如何处理。

File where the monthpicker component included.

要求：因此，如果用户从选择器中选择月份和年份，则需要在 JSON 结构中更新该特定值，而现在不会发生。

例如：

如果用户选择月份为 Jun，年份为 2016，则 JSON 格式将如下所示，

{
  "basicDetails": {
    "firstName": "...",
    "lastName": "..."
  },
  "companyDetails": [
    {
      "companyName": "...",
      "designation": "...",
      "startDate": "06/2016"
    }
  ]
}

由于可以添加其他行，因此需要将所选值添加到相应的输入中。

真的卡了很久，需要一些好的帮助..

Answer 1

@Undefined 我将使用我的答案 here 中的相同代码，并将添加您尝试在这篇文章中实现的功能。

---

MonthPicker 组件值的更改没有反映到formValue 的原因是因为您将setMonth 作为onChange 而不是handleInputChange 传递——基本上这些更改只存储在month 状态。

理想情况下，我们应该能够像下面这样使用MonthPicker，其中我们接受来自onChange 属性的event，我们可以使用它来提取target.name 和target.value 属性。

<MonthPicker
  label="Start Date"
  name="startDate"
  onChange={(event) => handleInputChange(index, event)}
/>

我修复并重构了您的 MonthPicker 组件，因此每次它的 value 更改（例如递增/递减年份和选择月份）时，我们都会调用 onChange 属性传递其新的 value。

请查看下面的演示，如果您有任何问题，请告诉我。

Answer 2

您在更改时调用 setMonth，但未传递值：

onChange={(e) => setMonth(e.target.value)}