Javascript 基于表单条目值的对象和数组结构
我需要构建以下两个场景,但不确定如何从JavaScript的角度来表示。我正在使用React,用户将收到一个表单,用于输入两种场景的以下信息,其中每周的每一天都将显示给用户,如下所示: 场景1:每周Javascript 基于表单条目值的对象和数组结构,javascript,arrays,reactjs,design-patterns,Javascript,Arrays,Reactjs,Design Patterns,我需要构建以下两个场景,但不确定如何从JavaScript的角度来表示。我正在使用React,用户将收到一个表单,用于输入两种场景的以下信息,其中每周的每一天都将显示给用户,如下所示: 场景1:每周 Day of week = Monday (which can have one or more of the following entries) Task Name Task Start Time Task End Time . . . . .
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
Week 1:
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
Week 2
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
对于此场景,我考虑了以下结构,其中还将有一个按钮供用户添加/删除taskDetails:
const weeklyTasks = {
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
]
}
const FortnightlyTasks = {
weekNumber: 1,
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
weekNumber: 2,
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
]
}
场景2:每晚
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
Week 1:
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
Week 2
Day of week = Monday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
. . .
. . .
Day of week = Sunday (which can have one or more of the following entries)
Task Name
Task Start Time
Task End Time
对于此场景,我考虑了以下结构,其中还将有一个按钮供用户添加/删除taskDetails:
const weeklyTasks = {
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
]
}
const FortnightlyTasks = {
weekNumber: 1,
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
weekNumber: 2,
dayOfWeek: "Monday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
dayOfWeek: "Tuesday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
],
. . .
. . .
dayOfWeek: "Sunday",
taskDetails: [
{
taskName: "",
taskStartTime: "",
taskEndTime: ""
}
]
}