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

你的代码中有一些奇怪的东西 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

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

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

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

3 个答案: