javascript - 通过监听其他输入字段的更改事件react js计算总价

Question

我在 React JS 中有这个组件。我有 3 个输入字段。一种是磅，一种是 PPP(每磅价格)，另一种是总计。用户在输入字段中输入他们想要的英镑，我已经默认将 PPP 作为值传递，然后我想在用户输入时通过乘以价格 * ppp 来计算总数。

这是整个组件:

class NewTransaction extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            pounds: '',
            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({value: event.target.value});
    }

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

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

    handleFormSubmit(event) {
        event.preventDefault();

        let pounds = $("#pounds").val();
        let ppp = $("#ppp").val();
        let total = ppp * pounds;
        console.log(total);

        axios.post('/api/add/transaction', {
            pounds: pounds,
            ppp: ppp,
            total: total
        })
            .then(function (response) {
                console.log(response);
                $("#pounds").val('');
                $("#ppp").val('');
                $("#total").val('');
            })
            .catch(function (error) {
                console.log(error.response.data);
            });
    }


    render() {

        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..." onChange={this.handlePoundsChange} required />
                                </td>
                            </tr>
                            <tr>
                                <td>Price</td>
                                <td>
                                    <input type="text" name="ppp" id="ppp" className="form-control" value="2.10" onChange={this.handlePPPChange} required />
                                </td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td>
                                    <input type="text" name="total" id="total" className="form-control" onChange={this.handleTotalChange} />
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div className="col-xs-12">
                            <input
                                type="submit"
                                className="btn btn-block btn-primary"
                                value="Customer Checkout"/>
                        </div>
                    </form>
            </div>
        )
    }
}

因此，如果用户在磅输入字段中输入 2，React 将输入并乘以 2 * PPP(在本例中为 2.10)，我希望它显示在“总计”中"立即输入字段。

Answer 1

这是您的固定代码。应该像魅力一样发挥作用。

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