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

我正在制作一个react应用程序，它的表单由基本细节和就业细节部分组成

表单几乎完成了，而且我能够为不同的部分形成JSON结构

在此完成工作示例：

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

因此，我制作了一个自定义的月份和年份选择器，并在组件中包含了与相同的内容

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

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

但我能理解这是一个需要改变的地方，但我不确定能否处理好

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

例如：

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

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

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

---

确实被困了很长时间，需要一些好的帮助。

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

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

---

@未定义我将使用与我的答案相同的代码，并将添加您试图在本文中实现的功能

---

MonthPicker

组件值的更改没有反映到

formValue

的原因是，您将

setMonth

作为

onChange

传递，而不是

handleInputChange

——基本上，更改只存储在

month

状态

理想情况下，我们应该能够像下面这样使用

MonthPicker

，在这里我们从

onChange

属性中接受

事件，我们可以使用它来提取
target.name
和
target.value
属性

handleInputChange（索引、事件）}
/>

我修复并重构了您的组件，因此每次它的
值
都会发生变化，比如增加/减少年份并选择月份，我们将调用
onChange
道具传递其新的
值

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

不要手动设置日期格式。使用
日期fns
，
时刻
，可以设置日期格式。求你了。@BertrandMarron，你能帮我一下吗？我无法添加像MomentJS这样的附加库。。那么你能帮助我准确地实现预期的结果吗？你必须对你的
monthpicker.js
进行更改，我认为它不需要接受
值
道具。@bertdida，你能帮我修改
monthpicker.js
兄弟吗？请不要误会我，我是react的初学者，您以前的解决方案很有帮助，因此如果您帮助我在
companyDetails
json对象中生成日期值，那么这将对我非常有帮助。。希望您能为我提供正确的解决方案。这将导致
TypeError:无法读取未定义的属性“value”
。。你也可以随意尝试同样的方法，把我提供的有问题的代码沙盒分叉。兄弟，你真的帮了我大忙。。我接受在codesandbox中工作的解决方案。。我会在我的真实应用程序中实现同样的功能，如果我有任何疑问，我会问你。。谢谢。。
onChange={(e) => setMonth(e.target.value)}