小编典典

将下一个值相对于第一个值增加一定数量

reactjs

我有一个应用程序,用户可以在其中设置每个生成字段的时间。

  const [firstTime, setFirstTime] = useState({});
  const [secondTime, setSecondTime] = useState({});

  const onFinish = values => {
    console.log(
      values.users.map(i => {
        return {
          ...i,
          time0: moment(i.time0).format("HH mm"),
          time1: moment(i.time1).format("HH mm")
        };
      })
    );
  };

  function onChange1(time, timeString, key) {
    console.log(time, timeString);
    setFirstTime({ ...firstTime, [key]: timeString });
  }
  function onChange2(time, timeString, key) {
    console.log(time, timeString);
    setSecondTime({ ...secondTime, [key]: timeString });
  }
  console.log(secondTime, firstTime);
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    key={`item7${index}`}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item8${index}`}
                    name={[field.name, "time0"]}
                    initialValue={moment(
                      firstTime[Object.keys(firstTime)[index - 1]]|| '07:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time0"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange1(date, dateString, field.key)
                      }

                    />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item9${index}`}
                    name={[field.name, "time1"]}
                    initialValue={moment(
                      secondTime[Object.keys(secondTime)[index - 1]] || '10:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time1"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange2(date, dateString, field.key)
                      } 
                    />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

接下来是该应用程序的想法:

  1. 用户单击add field按钮,其中显示一些输入,用户可以在其中添加价值
  2. 日期选择器的默认值为07:00 and 10:00(但用户可以更改初始值)
  3. 用户将生成的每个日期选择器的下一个值必须比用户的每个选定值高5分钟(来自具有时间选择器的上一行)
    Ex1:
    07 : 00 10:00
    07:05 10:05

示例2:
用户可以通过以下方式更改第一个值: 07 :25
10:05
07:30 10:10
用户可以选择下一个值,例如:07:40 10:15
07:45 10:20
…上..

现在,仅当我单击“添加字段”按钮而不更改日期选择器中的值时,该想法才起作用,并且下一个值将与我描述的一样,但是当我尝试从选择器中更改值时出现问题,因为下一个选择器不要考虑5分钟后该值会更高。
问题:如何解决问题并使上述想法可行?
演示:

https://codesandbox.io/s/hungry-star-
nu5ld?file=/index.js:365-3725


阅读 239

收藏
2020-07-22

共1个答案

小编典典

首先,我们在这里看不到任何代码来跟踪您未更改的值。另外,您正在添加5分钟的时间,但没有保留它的记录。

为了解决这个问题,让我们在致电添加之前做所有这些事情:

 <Button
     type="dashed"
     onClick={() => {
                const length = Object.keys(firstTime).length;
                if (length > 0) {
                  const newTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  )
                  const newSecTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  ).add(5, "minutes");
                  setFirstTime({ ...firstTime, [length]: newTime });
                  setSecondTime({ ...secondTime, [length]: newSecTime });
                } else {
                  setFirstTime({ ...firstTime, [length]: "07:00" });
                  setSecondTime({ ...secondTime, [length]: "10:00" });
                }
                add();
              }}
     block
     >
     <PlusOutlined /> Add field
     </Button>

接下来,使用时间选择器的defaultValue属性显示值:

 <TimePicker
    defaultValue={moment(firstTime[index], "HH mm")}
    onChange={(date, dateString) =>
    onChange1(date, dateString, field.key)
     }
  />
2020-07-22