尝试使用 React 计算带有价格的日期答案

【问题标题】：trying to calculate dates with price using React尝试使用 React 计算带有价格的日期
【发布时间】：2021-04-26 02:34:57
【问题描述】：

我正在尝试通过从签入和签出值中获取选定日期并添加每天的价格来计算总价。

我找不到如何从日期中获取数值的解决方案。

这是我迄今为止尝试过的：

解析 Int()
解析浮点数()
Date.parse()

我的代码

handleChange = (e) => {
    e.preventDefault();

    this.setState({ [e.target.name]: e.target.value });

    let checkIn = Date.parse(this.state.checkin);
    let checkOut = Date.parse(this.state.checkout);

    console.log("test" + checkIn + checkOut);

    let days = Math.floor((checkOut - checkIn) / (1000 * 60 * 60 * 24));
    let totalPrice = price * days;

    localStorage.setItem("totalPrice", totalPrice);


    this.validateFormData();
  };

表格的签入/签出部分：

                <Form.Label htmlFor="checkin" className="form__label">
                  Check In
                </Form.Label>
                <input
                  name="checkin"
                  label="Next appointment"
                  type="date"
                  className="form__control"
                  required="required"
                  value={this.state.checkin}
                  onChange={this.handleChange}
                />

                {formErrors.checkin.length > 0 && (
                  <span className="[ form__error ]">
                    <i>{formErrors.checkin}</i>
                  </span>
                )}
              </Form.Group>
              <Form.Group className="form__group">
                <Form.Label htmlFor="checkout" className="form__label">
                  Check Out
                </Form.Label>

                <input
                  name="checkout"
                  label="Next appointment"
                  type="date"
                  className="form__control"
                  required="required"
                  value={this.state.checkout}
                  onChange={this.handleChange}
                />
                {formErrors.checkout.length > 0 && (
                  <span className="[ form__error ]">
                    <i>{formErrors.checkout}</i>
                  </span>
                )}
              </Form.Group>
              <p>
                TotalPrice = {localTotalPrice} Price:{" "}
                <span className="card__price--color"> {price}$</span>
              </p>

【问题讨论】：

标签： reactjs date checkout checkin

【解决方案1】：

this.setState 是一个异步函数。因此，this.setState({ [e.target.name]: e.target.value }); 期间所做的更改不会立即可用。

如果必须使用这些值，最好直接使用e.target.value。然后Date.parse 应该可以工作

【讨论】：