在React中计算总价

如何解决在React中计算总价

所以这是我第一次使用React。 我必须计算预订的（总）价格。

预订价格取决于几个因素：

• 船长：每米€1,25
• 人数：每人€1
• 用电：每天1.25欧元

比方说，这艘船长10m，那里有2个人用电。他们呆了两天。计算结果如下：

• BoatLength（10）* 1.25 * 2 = 25
• AmountOfPeople（2）* 1 * 2 = 4
• UseOfElectricity（true）= 1.25 * 2 = 2.5
• 总价= 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？

解决方法

您需要在@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .carousel-open:checked + .carousel-item { position: static; opacity: 100; } .carousel-item { -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } #carousel-1:checked ~ .control-1,#carousel-2:checked ~ .control-2,#carousel-3:checked ~ .control-3 { display: block; } .carousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10; } #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { color: #2b6cb0; } } 中使用calculateStayTime的结果。您可以将停留时间值分配给变量，但我可能只替换最后一行：calculatePrice可以替换为// const total_price = price_per_day * AmountOfDays;，这应该会为您提供所需的内容。