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

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

我的当前代码在

总价

输入字段中正确设置了值，但无法设置状态

例如，如果用户输入的

数量

等于

4

，而

单价

等于

25

<代码>此.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>

handleChangeQuantity（事件）{
const{value}=event.target；
this.setState（{Quantity:value}）；
}   
HandleChange单价（事件）{
const{value}=event.target；
this.setState（{UnitPrice:value}）；
}
handleChangeTotalPrice（事件）{
const{TotalPrice}=event.target.value；
这个.setState（{
总价：this.state.Quantity*this.state.UnitPrice
}); 
}   
量
单价
总价

对于初学者，我会将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>
  </>
  );
}

render（）{
const{Quantity，UnitPrice}=this.state；
返回(
量
单价
总价
);
}

这将有助于解决您的问题：

---

这里有一个代码笔链接，指向代码的工作版本。我拿出了类名和其他东西。随便玩玩吧

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

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

从“React”导入React
导出类应用程序扩展React.Component{
状态={
数量：0，
单价:0,，
总价：0，
}
handleChangeQuantity=async（事件：任意）=>{
常量{value}=event.target
等待此.setState（{Quantity:value}）
this.handleChangeTotalPrice（）
}
handleChangeUnitPrice=async（事件：任意）=>{
常量{value}=event.target
等待此.setState（{UnitPrice:value}）
this.handleChangeTotalPrice（）
}
handleChangeTotalPrice=（）=>{
这是我的国家({
总价：this.state.Quantity*this.state.UnitPrice，
})
console.log（this.state.TotalPrice）
}
render（）{
返回(
量
单价
总价
)
}
}

---

谢谢你！在我的例子中，

handleChangeTotalPrice（事件）

似乎永远不会被触发。我得到一个错误，说

const{ExtendedPrice}

从未被读取。请在输入中尝试以下操作：

onChange={（e）=>this.handleChangeUnitPrice（e）}

。这应该会引起奇怪的。。。我仍然无法触发那个函数。在我的渲染中，当我执行

{this.state.this.state.TotalPrice}

时，它会在我调整其他字段时更改价格。只是不会触发处理程序设置状态。我在答案中添加了一个代码笔链接。I works+在您调整数量或单价时更新总价。如果这能解决您的问题，我们将非常感谢您的支持和检查。谢谢非常感谢。你能再检查一下你发送的链接吗？看起来它是一个空代码笔。选中此选项，将触发数量和单价更改时的

handleChangeTotalPrice

函数@曼尼拉吉穆鲁甘：事实并非如此。当我更改数量或单价时，

handleChangeTotalPrice

不会触发，除非调用该函数，否则不会触发。。无论您在哪里调用

handleChangeTotalPrice

，那么该函数将如何运行？？将上述代码放在沙箱中，包括您的确切问题，并详细解释需求。。查看上面提供的沙盒控制台，同时更改数量和价格的值。。将记录状态中的

TotalPrice

值。@ManirajMurugan我在创建沙箱时遇到问题。我的问题是使用

handleChangeTotalPrice

必要吗？我只想在用户输入数量和单价时设置总价的状态。那么有没有更好的方法来保存这个呢？我已经发布了一个答案。。很高兴帮助你。。