如何根据在 reactjs 中插入字段进行计算？

Question

      handleContractValueChange(e) {
  this.setState({ currency: e.target.value });
    console.log(e.target.value);
 }

handleSubscrtiptionAmountChange(e) {
    this.setState({ subscriptionamount: e.target.value });
    console.log(e.target.value);

}

 handleQuarterPercentageChange(e){
    this.setState({Quarterpercentage: e.target.value});
   console.log(e.target.value);

  }




  <div className="form-group row">

<label className="col-sm-2 form-control-label text-xs-right"> Contract Value: </label>
<div className="col-sm-3">
    <input type="text" className="form-control box_ip" placeholder="Contract Amount" id="Contract Value" onChange={this.handleContractValueChange} value={this.state.currency} />
</div>

   <label className="col-sm-2 form-control-label text-xs-right"> Monthly Subscription Amount Payback percent</label>
    <div className="col-sm-3">
        <input type="text" className="form-control box_ip" placeholder="SGD" id="Subscription Amount" onChange={this.handleSubscrtiptionAmountChange} name='Subscription Amount' value={this.state.subscriptionamount} />
    </div>
</div>

<div>
<label className="col-sm-2 form-control-label text-xs-right"> Monthly Subscription amount Payback: </label>
<div className="col-sm-3">
    <input type="text" className="form-control box_ip" placeholder="Monthly Subscription amount Payback" id="Monthly Subscription amount Payback" onChange={this.handleQuarterPercentageChange} value={this.state.Quarterpercentage} /> </div>    

</div>

我有三个字段合同价值，每月认购金额回报百分比，根据填写合同价值的每月认购金额回报，每月认购金额回报百分比第三个字段（每月认购金额回报）应该自动填写。

举个例子，如果我填写的合约价值是 1000 每月订阅量回报百分比为2（百分比为based on contract value and Monthly Subscription Amount Payback Quarterpercentage third field should fill automatically）

然后订阅金额回报应自动填写为 1000/100 * 2 = 20，因此 20 将填写在订阅金额回报中

Answer 1

您可以在onChange上设置第三个字段的值

handleContractValueChange(e) {
      let Quarterpercentage = 0;
      if(this.state.subscriptionamount > 0) {
         Quarterpercentage = (this.state.subscriptionamount * e.target.value)/100;       
       }
      this.setState({ 
         currency: e.target.value,
         Quarterpercentage
      });
        console.log(e.target.value);
     }

您可以对handleSubscrtiptionAmountChange 执行相同的操作。

handleSubscrtiptionAmountChange(e) {
      let Quarterpercentage = 0;
      if(this.state.currency > 0) {
         Quarterpercentage = (this.state.currency * e.target.value)/100;       
       }

    this.setState({ 
      subscriptionamount: e.target.value,
      Quarterpercentage
    });
    console.log(e.target.value);

}