如何在 JSON 表单中添加日期值?[附上片段] [英] How to add date value in a JSON form? [Snippet attached]
问题描述
我正在制作一个包含基本详细信息和就业详细信息部分的表单.
表格几乎完成了,我也可以为不同的部分形成一个 JSON 结构.
完整的工作示例在这里:
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屋!