React Typescript-将两个值设置为状态

Question

我有一个包含3个数字字段的表格。用户可以输入数量和单价。然后，它将在最后一个字段中将总价格显示为禁用字段。

我当前的代码在Total Price输入字段中正确设置了值，但是无法设置状态。

例如，如果用户输入的Quantity等于4，并且输入UnitPrice至25。 this.state.TotalPrice应该为100

handleChangeQuantity(event) {
    const { value } = event.target;
    this.setState({ Quantity: value }); 
}   

handleChangeUnitPrice(event) {
    const { value } = event.target;
    this.setState({ UnitPrice: value }); 
}

handleChangeTotalPrice(event) {
    const { TotalPrice } = event.target.value;
    this.setState({ 
        TotalPrice: this.state.Quantity * this.state.UnitPrice
    }); 
}   


<div>
    <label>
        Quantity
    </label>
    <input
        value={this.state.Quantity}
        onChange={this.handleChangeQuantity}
        type="number"
        className="phone validate"
        name="Quantity #1"
        maxLength={9}
        pattern='[0-9]{0,5}'
    />
</div>

<div>
    <label>
        Unit Price
    </label>
    <input
        value={this.state.UnitPrice}
        onChange={this.handleChangeUnitPrice}
        type="number"
        className="phone validate"
        name="Unit Price #1"
        maxLength={15}
        pattern='[0-9]{0,5}'
    />
</div>

<div>
    <label>
        Total Price
    </label>
    <input
        value={this.state.Quantity * this.state.UnitPrice}
        onChange={this.handleChangeExtendedPrice}
        type="number"
        className="phone validate"
        name="Estimated Extended Price #1"
        disabled
    />
</div>

Answer 1

对于初学者，我将jsx放入render方法：

render() {
  const { Quantity, UnitPrice } = this.state;
  return (
  <>
    <div>
      <label>
        Quantity
      </label>
      <input
        value={Quantity}
        onChange={this.handleChangeQuantity}
        type="number"
        className="phone validate"
        name="Quantity #1"
        maxLength={9}
        pattern='[0-9]{0,5}'
      />
    </div>

    <div>
      <label>
        Unit Price
      </label>
      <input
        value={UnitPrice}
        onChange={this.handleChangeUnitPrice}
        type="number"
        className="phone validate"
        name="Unit Price #1"
        maxLength={15}
        pattern='[0-9]{0,5}'
      />
    </div>

    <div>
      <label>
        Total Price
      </label>
      <input
        value={Quantity * UnitPrice}
        onChange={this.handleChangeExtendedPrice}
        type="number"
        className="phone validate"
        name="Estimated Extended Price #1"
        disabled
      />
    </div>
  </>
  );
}

这应该有助于解决您的问题：React setState not updating state

这里是一个代码笔链接，指向您的代码的有效版本。我拿出了classNames和其他东西。随便玩吧。 https://codepen.io/bradleyboy/pen/OPBpGw