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

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)&nbsp; handleChange = (event) => {&nbsp; &nbsp; this.setState(&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; [event.target.name]: event.target.value&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; this.checkDate(event);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; };然后像这样修改checkDate函数，&nbsp; checkDate = async (event) => {&nbsp; &nbsp; let d1 = new Date(this.state.dateFrom);&nbsp; &nbsp; let d2 = new Date(this.state.dateTo);&nbsp; &nbsp; if (d1.getTime() < d2.getTime()) {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; validate: false&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; validate: true&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; console.log(d1.getTime());&nbsp; &nbsp; console.log(d2.getTime());&nbsp; &nbsp; console.log(this.state.validate);&nbsp; };也改变条件，d1.getTime() > d2.getTime() 截止 d1.getTime() < d2.getTime()日期d1应该总是小于d2日期...