如何以 JSON 形式添加日期值？[附上片段]

IT技术 javascript reactjs forms date next.js
2021-05-21 09:34:54

我正在制作一个 React 应用程序，它的形式包含基本细节和就业细节部分。

表格差不多完成了，我也可以为不同的部分形成一个 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()}`
  );

但我能理解这是需要改变的地方，但我不确定处理它。

包含月份选择器组件的文件。

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

例如：

如果用户选择月份为六月，年份选择为 2016，那么 JSON 格式将类似于，

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

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

真的卡住了很长时间，需要一些好的帮助..

2个回答

@Undefined我将利用我的回答相同的代码在这里，将增加你想对这个职位来实现该功能。

MonthPicker组件值的更改没有反映到 的formValue原因是因为您传递的是setMonthasonChange而不是handleInputChange- 基本上更改仅存储在month状态上。

理想情况下，我们应该能够使用MonthPicker下面的类似内容，在那里我们接受event来自onChangeprop 的an ，我们可以使用它来提取target.name和target.value属性。

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

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

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

编辑下一个动态测试问题（分叉）

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

onChange={(e) => setMonth(e.target.value)}
其它你可能感兴趣的问题
上一篇访问子组件中父组件的状态？ 下一篇构建 Docker 镜像时已安装 Typescript 时要求安装