javascript - 使用 reactjs 计算多个表单的 2 个日期之间的时间

Question

我有一个应用程序，每个用户都可以以动态形式为许多人设置时间。
点击Add field button用户可以添加时间范围，在时间选择器的右侧会出现这 2 次的差异。我还有一个默认时间:12:08 - 12:10 , 所以默认范围应该是 0 hours and 2minutes , 但是这个值只是为第一个输入保存的，但是当我点击 Add field按钮，我没有看到计算的范围。

const Demo = () => {
  const [date, setDate] = useState({ 0: "12:08" });
  const [fullDate2, setFullDate2] = useState({ 0: "12:10" });
  console.log(date, fullDate2);
  const onFinish = values => {
    console.log("Received values of form:", values, date);
  };

  const changeDate1 = (momentDate, dateString, key) => {
    console.log(dateString, key);
    setDate({ ...date, [key + 1]: dateString });
  };
  const changeDate2 = (momentDate, dateString, key) => {
    setFullDate2({ ...fullDate2, [key + 1]: dateString });
  };

  const myDiff = (startSubEventTimes, endSubEventTimes, k) => {
    if (Object.keys(endSubEventTimes).length) {
      const startTime = moment(startSubEventTimes[k], "HH:mm");
      const endTime = moment(endSubEventTimes[k], "HH:mm");
      const duration = moment.duration(endTime.diff(startTime));
      const hours = parseInt(duration.asHours(), 0);
      const minutes = parseInt(duration.asMinutes(), 0) - hours * 60;
      if (!isNaN(hours) && !isNaN(minutes)) {
        return `${hours}hours and  ${minutes}minutes`;
      }
    }
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>

                  <TimePicker
                    defaultValue={moment("12:08", "HH:mm")}
                    format={"HH:mm"}
                    // value={date}
                    onChange={(date, dateString) =>
                      changeDate1(date, dateString, field.key)
                    }
                  />
                  <TimePicker
                    defaultValue={moment("12:10", "HH:mm")}
                    // value={fullDate2}
                    format={"HH:mm"}
                    onChange={(date, dateString) =>
                      changeDate2(date, dateString, field.key)
                    }
                  />
                  <span>
                    difference -{" "}
                    {Object.keys(fullDate2).length
                      ? myDiff(date, fullDate2, field.key)
                      : 0}
                  </span>
                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

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

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

问题:如何为每个生成的表单设置默认范围？
演示: https://codesandbox.io/s/runtime-bird-6mlfs?file=/index.js:313-3735

Answer 1

您应该为新键定义默认值:

  const myDiff = (startSubEventTimes, endSubEventTimes, k) => {
    // if (Object.keys(endSubEventTimes).length) {
      const startTime = moment(startSubEventTimes[k] || "12:08", "HH:mm");
      const endTime = moment(endSubEventTimes[k] || "12:10", "HH:mm");
      const duration = moment.duration(endTime.diff(startTime));
      const hours = parseInt(duration.asHours(), 0);
      const minutes = parseInt(duration.asMinutes(), 0) - hours * 60;
      if (!isNaN(hours) && !isNaN(minutes)) {
        return `${hours}hours and  ${minutes}minutes`;
      }
    // }
  };

如果你删除一个字段，也应该从状态中删除 [key] 值，以防止下一个默认值内存。
但是要正确更新它，请检查@Rostyslav 的答案
但我仍然会将其发送给代码审查: https://codereview.stackexchange.com