代码之家 › 专栏 › 技术社区 › user9196877

如何在reactjs中插入字段进行计算?

calc reactjs angularjs jquery javascript

user9196877 · 技术社区 · 7 年前

      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

1 回复 | 直到 7 年前

Vipul Singh 7 年前

您可以在 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);

}

推荐文章