繁体   English   中英

在 React 中计算总价

[英]Calculating the total price in React

所以这是我第一次尝试 React。 我必须计算预订的(总)价格。

预订价格由以下几个因素决定:

  • 船长:每米 1.25 欧元
  • 人数:1欧元/人
  • 用电量:每天 1.25 欧元

假设这艘船长 10m,有 2 个人在那里使用电力。 他们停留2天。 计算如下:

  • 船长(10) * 1.25 * 2 = 25
  • AmountOfPeople(2) * 1 * 2 = 4
  • UseOfElectricity(true) = 1.25 * 2 = 2.5
  • total_price = €25 + €4 + €2.5 = €21.5

我尝试在我的代码中实现它,它看起来像这样:

import React, { Component } from 'react'
import BoatForm from "./BoatForm";
import StayForm from "./StayForm";

export default class PriceCalculator extends Component {
    /**
     * So, we created a form for the customers so that they can register their boat.
     * Now we want to let them know how much their reservation costs.
     * The size of the boat, amount of people, amount of days and use of electricity are all parameters.
     */

    constructor(props) {
        super(props)
        this.state = {
            boat_length: '',
            amount_of_people: '',
            arrival_date: '',
            leave_date: '',
            use_of_electricity: '',
            box_number: ''
        }
    }

    /**
     * We use date fields in our form to define the stay date of the customer.
     * That means we have to calculate the days ourselves.
     */

    calculateStayTime() {
        const ArrivalDate = new Date(this.state.arrival_date);
        const LeaveDate = new Date(this.state.leave_date);
        // calculate difference
        const DiffTime = Math.abs(LeaveDate - ArrivalDate);
        const DiffDays = Math.ceil(DiffTime / (1000 * 60 * 60 * 24));
        let AmountOfDays = DiffDays;
        return AmountOfDays;
    }

    /**
     *  Prices per day:
     *  - Price per meter: 1,25
     *  - Price per person: 1
     *  - Price for using electricity: 1,25
     */

    calculatePrice() {
        const BoatLength = this.state.boat_length;
        const meter_price = 1.25;
        const Persons = this.state.amount_of_people;
        const persons_price = 1;

        let price_per_day = BoatLength * meter_price + Persons * persons_price;


        const electricity_price = 1.25;
        const use_of_electricity = true;
        // ? = if statement
        price_per_day = price_per_day + (use_of_electricity ? electricity_price : 0);
        // const total_price = price_per_day * AmountOfDays;
    }

}

我努力将变量从calculateStayTime() 传递给calculatePrice()。 任何人都可以帮助我如何将我的计算公式化为 React.JS?

您需要在calculatePrice使用calculateStayTime的结果。 您可以将停留时间值分配给一个变量,但我可能只替换最后一行: // const total_price = price_per_day * AmountOfDays; 可以替换为const total_price = price_per_day * this.calculateStayTime(); 这应该给你你需要的东西。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM