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

在最后一个输入字段 totalPrice 中，您可以将值设置为，

value={this.state.TotalPrice}

所以你可以设置状态值，

handleChangeTotalPrice = () => {
    this.setState({
      TotalPrice: this.state.Quantity * this.state.UnitPrice,
    })
    console.log(this.state.TotalPrice)
  }

因此，只要数量和价格发生变化，您就可以调用handleChangeTotalPrice 函数..

TotalPrice 的状态值会相应更新。

你可以像下面这样改变你的代码，

import React from 'react'

export class App extends React.Component {
  state = {
    Quantity: 0,
    UnitPrice: 0,
    TotalPrice: 0,
  }

  handleChangeQuantity = async (event: any) => {
    const { value } = event.target
    await this.setState({ Quantity: value })
    this.handleChangeTotalPrice()
  }

  handleChangeUnitPrice = async (event: any) => {
    const { value } = event.target
    await this.setState({ UnitPrice: value })
    this.handleChangeTotalPrice()
  }

  handleChangeTotalPrice = () => {
    this.setState({
      TotalPrice: this.state.Quantity * this.state.UnitPrice,
    })
    console.log(this.state.TotalPrice)
  }

  render() {
    return (
      <div>
        <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.TotalPrice}
            type="number"
            className="phone validate"
            name="Estimated Extended Price #1"
            disabled
          />
        </div>
      </div>
    )
  }
}

Working Sandbox

Answer 2

对于初学者，我会将 jsx 放入渲染方法中：

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/maksimmamrikov/pen/jObVKbZ?editors=1010