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

Posted 2023-03-22

【中文标题】尝试使用 React 计算带有价格的日期

【英文标题】：trying to calculate dates with price using 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>

【参考方案1】：

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

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