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

Question

我在 React JS 中有这个组件。我有 3 个输入字段。一个是磅，一个是 PPP（每磅价格），另一个是总量。用户在输入字段中输入他们想要的磅数，我已经默认将 PPP 作为值传递，然后我想在用户输入时通过乘以 price * 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

你的代码中有一些奇怪的东西。
1. 为什么要调用 setState 并更改 value 属性而不是相关的？
例如不应该这样：

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

变成这样：

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

2。您没有绑定输入中状态的值。
这个：

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

大致应该是这样的：

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

3。为什么你的 total 元素是 <input />？您希望客户能够改变它，无论其他输入值是什么？

编辑
我忘了说，你不需要 jQuery 来重置输入。当您完成 ajax 调用后，您只需重置状态属性，输入的绑定将为您完成这项工作。

Answer 2

您需要link输入框总值到状态。

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

然后，如果您希望在用户输入 Pounds 和 PPP 时更改总计值，则需要在 handlePoundsChange 和 handlePPPChange 函数中更新总计状态。

handlePoundsChange(event) {
    this.setState({
      total: event.target.value * this.state.ppp
  });
}

handlePPPChange(event) {
    this.setState({
      total: event.target.value * this.state.pounds
  });
}

Answer 3

这是您的固定密码。应该像魅力一样工作。

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

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

Calculate total price by listening to change events on other input fields react js

javascript

state

reactjs