我将如何比较表单中的两个日期并验证它们？第二个不应该在第一个之前

Question

我正在尝试使用 Bootstrap 在 React 中构建一个表单。我有两个日期（一个是你开始工作的时间，另一个是你结束公司工作的时间），第二个不应该在第一个之前。所以如果第一个是 10.1.2020，你应该不能在第二个中选择这个日期之前的日期。作为一个反应应用程序，我也给你一个链接：https://codesandbox.io/s/friendly-worker-nwtgu ?file=/package.json我感兴趣的代码在这些组件中：Practical 和 PracticalForm。表格代码：       <Form.Group controlId="formBasicDateFrom">          <Form.Label>Worked from</Form.Label>          <Form.Control            onChange={(e) => {              checkDate(e);              handleChange(e);            }}            type="date"            defaultValue={dateFrom}            name="dateFrom"            required          />        </Form.Group>        <Form.Group controlId="formBasicDateUntil">          <Form.Label>Worked to</Form.Label>          <Form.Control            isInvalid={validate}            onChange={(e) => {              checkDate(e);              handleChange(e);            }}            // onChange={(e) => {            //   handleChange(e);            //   checkDate();            // }}            type="date"            defaultValue={dateTo}            name="dateTo"            required          />          <Form.Control.Feedback type="invalid">            Date must be later then date from when you worked...          </Form.Control.Feedback>        </Form.Group> 我验证的函数现在看起来像这样：checkDate = (event) => {    let d1 = new Date(this.state.dateFrom);    let d2 = new Date(this.state.dateTo);    if (d1.getTime() > d2.getTime()) {      this.setState({        validate: false,      });    } else {      this.setState({        validate: true,      });    }    console.log(d1.getTime());    console.log(d2.getTime());    console.log(this.state.validate);  };

Answer 1

您可以将checkDate(event)函数移动到函数内部，因为这里的事物是异步的，因此在设置状态时您可以调用this.setState类似的东西，handleChangecheckDate(event)

  handleChange = (event) => {

    this.setState(

      {

        [event.target.name]: event.target.value

      },

      () => {

        this.checkDate(event);

      }

    );

  };

然后像这样修改checkDate函数，

  checkDate = async (event) => {

    let d1 = new Date(this.state.dateFrom);

    let d2 = new Date(this.state.dateTo);

    if (d1.getTime() < d2.getTime()) {

      this.setState({

        validate: false

      });

    } else {

      this.setState({

        validate: true

      });

    }

    console.log(d1.getTime());

    console.log(d2.getTime());

    console.log(this.state.validate);

  };

也改变条件，

d1.getTime() > d2.getTime() 截止 d1.getTime() < d2.getTime()日期d1应该总是小于d2日期...