Javascript 通过侦听其他输入字段上的更改事件来计算总价

我在React JS中有这个组件。我有3个输入字段。一个是英镑，一个是购买力平价（每磅价格），另一个是总额。用户在输入字段中输入他们想要的英镑，默认情况下，我已经将购买力平价作为一个值传递，然后我想在用户输入时乘以价格*购买力平价来计算总额

这是整个组件：

类NewTransaction扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
英镑：''，
购买力平价：2.10，
总数：0
};
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
this.handleboundschange=this.handleboundschange.bind（this）；
this.handleppchange=this.handleppchange.bind（this）；
this.handleTotalChange=this.handleTotalChange.bind（this）；
}
componentWillMount（）{}
HandleBoundschange（活动）{
this.setState（{value:event.target.value}）；
}
HandleAppChange（事件）{
this.setState（{value:event.target.value}）；
}
HandletTotalChange（事件）{
this.setState（{value:event.target.value}）；
}
handleFormSubmit（事件）{
event.preventDefault（）；
设磅=$（“#磅”）.val（）；
设ppp=$（“#ppp”）.val（）；
总购买力=购买力平价*英镑；
控制台日志（总计）；
axios.post（“/api/add/transaction”{
磅：磅，
购买力平价：购买力平价，
总计：总计
})
.然后（功能（响应）{
控制台日志（响应）；
美元（“#英镑”）.val（“”）；
美元（“#购买力平价”）.val（“”）；
美元（“#总计”）.val（“”）；
})
.catch（函数（错误）{
console.log（error.response.data）；
});
}
render（）{
返回(
英镑
价格
全部的
)
}
}

---

因此，如果用户在磅输入字段中输入2，React将进入并乘以2*购买力平价（在本例中为2.10），我希望它立即显示在“总计”“输入字段中。

代码中有一些奇怪的东西。
1.为什么要调用

setState

并更改

value

属性而不是相关属性？
例如，不应该这样做：

handlePoundsChange(event) {
        this.setState({value: event.target.value});
    }

变成这样：

handlePoundsChange(event) {
        this.setState({pounds: event.target.value});
    }  

二,。您没有绑定输入中状态的值。
这：

大致应该是这样的：

<input value={this.state.pounds} type="text" name="pounds" id="pounds" className="form-control" placeholder="Enter Pounds..." onChange={this.handlePoundsChange} required  />  

三,。为什么您的

总计

元素是

？您希望客户机能够改变这一点，而不管其他输入值是什么

编辑

---

我忘了提到，您不需要在这里

jQuery

来重置输入。完成ajax调用后，只需重置状态属性，输入的绑定就可以完成这项工作。

代码中有一些奇怪的事情。
1.为什么要调用

setState

并更改

value

属性而不是相关属性？
例如，不应该这样做：

handlePoundsChange(event) {
        this.setState({value: event.target.value});
    }

变成这样：

handlePoundsChange(event) {
        this.setState({pounds: event.target.value});
    }  

二,。您没有绑定输入中状态的值。
这：

大致应该是这样的：

<input value={this.state.pounds} type="text" name="pounds" id="pounds" className="form-control" placeholder="Enter Pounds..." onChange={this.handlePoundsChange} required  />  

三,。为什么您的

总计

元素是

？您希望客户机能够改变这一点，而不管其他输入值是什么

编辑

---

我忘了提到，您不需要在这里

jQuery

来重置输入。完成ajax调用后，只需重置状态属性，输入的绑定就可以完成这项工作。

您需要将输入框的总值链接到状态

<input value={this.state.total} type="text" name="total" id="total" className="form-control" onChange={this.handleTotalChange} />

---

您需要将总输入框值链接到状态

<input value={this.state.total} type="text" name="total" id="total" className="form-control" onChange={this.handleTotalChange} />

---

这是您的固定代码。应该很有魅力

class NewTransaction extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pounds: 0,
      ppp: 2.10,
      total: 0
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handlePoundsChange = this.handlePoundsChange.bind(this);
    this.handlePPPChange = this.handlePPPChange.bind(this);
    //this.handleTotalChange = this.handleTotalChange.bind(this);
  }

  componentWillMount(){}

  handlePoundsChange(event) {
    this.setState(...this.state, {pounds: event.target.value});
  }

  handlePPPChange(event) {
    this.setState(...this.state, {ppp: event.target.value});
  }

  handleTotalChange(event) {
    //this.setState({value: event.target.value});
  }

  handleFormSubmit(event) {
    event.preventDefault();
    let pounds = this.state.pounds;
    let ppp = this.state.ppp;
    let total = ppp * pounds;
    console.log(total);
    const self = this;
    axios.post('/api/add/transaction', {
      pounds: pounds,
      ppp: ppp,
      total: total
    })
      .then(function (response) {
        console.log(response);
        self.setState({pounds: '', ppp: '', total: ''});
        // $("#pounds").val('');
        // $("#ppp").val('');
        // $("#total").val('');
      })
      .catch(function (error) {
        console.log(error.response.data);
      });
  }


  render() {
    const total = this.state.pounds * this.state.ppp;
    return (
      <div className="container">
        <form className="container" onSubmit={this.handleFormSubmit}>
          <table className="table table-bordered">
            <tbody>
            <tr>
              <td>Pounds</td>
              <td>
                <input type="text" name="pounds" id="pounds" className="form-control" placeholder="Enter Pounds..." value={this.state.pounds} onChange={this.handlePoundsChange} required />
              </td>
            </tr>
            <tr>
              <td>Price</td>
              <td>
                <input type="text" name="ppp" id="ppp" className="form-control" value={this.state.ppp} onChange={this.handlePPPChange} required />
              </td>
            </tr>
            <tr>
              <td>Total</td>
              <td>
                <input type="text" name="total" id="total" className="form-control" value={total} />
              </td>
            </tr>
            </tbody>
          </table>
          <div className="col-xs-12">
            <input
              type="submit"
              className="btn btn-block btn-primary"
              value="Customer Checkout"/>
          </div>
        </form>
      </div>
    )
  }
}

类NewTransaction扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
磅：0，
购买力平价：2.10，
总数：0
};
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
this.handleboundschange=this.handleboundschange.bind（this）；
this.handleppchange=this.handleppchange.bind（this）；
//this.handleTotalChange=this.handleTotalChange.bind（this）；
}
componentWillMount（）{}
HandleBoundschange（活动）{
this.setState（…this.state，{pounds:event.target.value}）；
}
HandleAppChange（事件）{
this.setState（…this.state，{ppp:event.target.value}）；
}
HandletTotalChange（事件）{
//this.setState（{value:event.target.value}）；
}
handleFormSubmit（事件）{
event.preventDefault（）；
让磅=this.state.lbs；
设ppp=this.state.ppp；
总购买力=购买力平价*英镑；
控制台日志（总计）；
const self=这个；
axios.post（“/api/add/transaction”{
磅：磅，
购买力平价：购买力平价，
总计：总计
})
.然后（功能（响应）{
控制台日志（响应）；
self.setState（{pounds:''，ppp:''，total:''}）；
//美元（“#英镑”）.val（“”）；
//美元（“#购买力平价”）.val（“”）；
//美元（“#总计”）.val（“”）；
})