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

Рабочая песочница

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 не обновляет состояние

Здесь ссылка на кодовую ручку к рабочей версии вашего кода. Я вынул classNames и другие вещи. Не стесняйтесь играть с этим. https://codepen.io/maksimmamrikov/pen/jObVKbZ?editors=1010