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);

}

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

1 个答案: