Javascript 对数字进行乘法/除法运算

我已经创建了3个输入字段。在乘以第一个和第二个文本字段的值后，第一个文本字段表示每晚价格，第二个文本字段表示夜数，第三个文本字段表示总夜数。我希望这些输入也是可编辑的。例如，如果我输入总计和每晚数，则应显示每晚价格；如果我输入每晚价格和总计数，则应显示夜晚数；如果我输入每晚数和每晚价格，则应显示总金额。 这是我的用户界面

我有一个日期范围选择器，就像这样。因此，如果我从这里选择日期，则夜数应根据这两个日期计算，并应显示在夜数文本字段中（例如，日期一=2020-03-04和日期二=2020-03-06，夜数应为2，）。如果我没有选择日期，则夜数应为我从该文本字段中输入的数字，默认情况下夜数应等于1。 到目前为止，乘法部分正在工作。（文本字段一个值x文本字段二个值）

我是个新手，如果有人能帮我，这对我来说意义重大。我希望你能理解我的问题

state = {
        textOne: 0,
        texttwo: 1,
        textthree: 0,
        checkin: '',
        checkout: '',

}

this.dateSelected（e，'checkout'）}
/>
this.dateSelected（e，'checkin'）}
/>
计算（e，'one'）}/>x
计算（e，'two'）}
/>=
这个。计算（e，'三'）}
/>

请显示代码。@JoeLloyd我只做了UI部分。我不知道怎么开始。如果您知道，请告诉meI建议您从学习react的基础知识开始，尝试模仿此页面中的示例（设置

输入

值，处理

更改

事件）：如果仍然不起作用，请在此处显示您迄今为止所做的尝试。@Walk hi感谢我提供的链接。@Walk我已经更新了我所做的代码。但我觉得这是不对的！你能告诉我这条路对不对

 calculate = async (e,type) => {
        if(type ==='one'){
            await this.setState({
               textOne:e.target.value
           }); 
        } else if(type ==='two'){
            await this.setState({
                texttwo:e.target.value
            });
        }
        else if(type ==='three'){
            await this.setState({
                textthree:e.target.value
            });
        }
        if((this.state.textOne !=='')&&(this.state.texttwo !== '')){
            let one = this.state.textOne;
            let two = this.state.texttwo;
            let total = one * two;
            await this.setState({
                textthree:total
            });
        }if ((this.state.texttwo !=='')&&(this.state.textthree !=='')){
            let two= this.state.texttwo;
            let three = this.state.textthree
            let total = three/two;
            await this.setState({
                textone:total
            });
        }
        if ((this.state.textOne !=='')&&(this.state.textthree !=='')){
            let one= this.state.textone;
            let three = this.state.textthree
            let total = three/one;
            await this.setState({
                textone:total
            });
        }
    }

 dateSelected = (date, dateType) => {

        if (dateType === 'checkin') {
            this.setState({
                checkin: moment(date).format('YYYY-MM-DD')
        });

        }
        else {
            this.setState({
                checkout: moment(date).format('YYYY-MM-DD')
            });
        }


    };

<DatePicker
        onChange={(e) => this.dateSelected(e, 'checkout')}
/>
<DatePicker
        onChange={(e) => this.dateSelected(e, 'checkin')}
/>

<Input
     size="default"
     placeholder="0"
     onChange={(e) => this.calculate(e, 'one')}/><div>x</div>
 <Input
    size="default"
    placeholder="0"
   onChange={(e) => this.calculate(e, 'two')}
 />=
    <Input
       size="default"
       placeholder="0"
      onChange={(e) => this.calculate(e, 'three')}
  />