如何以JSON形式添加日期值？ [附摘要] [英] How to add date value in a JSON form? [Snippet attached]

问题描述

我正在制作一个具有由基本详细信息和就业详细信息部分组成的表单的应用程序。

该表单几乎已完成，并且还能够为

在此处完成工作示例：

I am making a react app which has the form that consists of basic details and employment details section.

The form is almost done and also I am able to form a JSON structure for different sections.

Complete working example here: https://codesandbox.io/s/nextjs-css-only-carousel-forked-v7gg0

Now for employment details section, I am in the need to include start date and end date as an input field.

So I have made a custom month and year picker and included the same inside the components as monthpicker.js .

And from employment details section I have called the component using the code,

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

Using the following code, the selected value is updated,

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

But I can understand this is the place where things needs to be changed but I am not sure of handling it.

File where the monthpicker component included .

Requirement: So if user selects the month and year from the picker, then that particular value needs to get updated in the JSON structure which doesn't happen now.

Eg:

If user selects the month as Jun and year as 2016 then the JSON format will be like,

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

As it is possible to add additional rows, the selected value needs to get added to the respective inputs.

Really stuck for long and need some good help..

解决方案

@Undefined I'll be using the same code from my answer here and will add the feature you're trying to implement on this post.

---

The reason why the changes of your MonthPicker component's value is not reflecting to the formValue is because you are passing the setMonth as onChange instead of handleInputChange — basically the changes are stored only on the month state.

Ideally we should be able to use the MonthPicker like below, where we accept an event from the onChange prop that we can use to extract the target.name and target.value properties.

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

I fixed and refactored your MonthPicker component, so that everytime its value change like incrementing/decrementing the year and selecting a month we'll call the onChange prop passing its new value.

Please check the demo below and if you have questions just let me know.

这篇关于如何以JSON形式添加日期值？ [附摘要]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！