如何根据在 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>

我有三个字段Contract Value,Monthly Subscription Amount Payback percent,Monthly Subscription amount Payback based on filling Contract Value,Monthly Subscription Amount Payback percent third field(Monthly Subscription amount Payback) should be fill automatically.

让我们举个例子，如果我填写的合约价值是 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 中插入字段进行计算？

How to make calculations based on insertion of fields in the reactjs?

javascript

jquery

calc

angularjs

reactjs