根据 props 值反应标记计算

Question

我有一个组件，我在两种情况下进行订单估算计算（他的价格乘以数量）

1) 在生命周期方法中

componentDidMount(){
  if (this.props.isRestarted) {
    this.setState({
          orderEstimation: this.props.formData.valNominal * this.props.formData.priceLimit,
   })
}

2) 在活动中

<FormAmountField
    label={}
    placeholder={}
    value={this.state.price}
    onChangeText={(value) => {
    this.setState({
        price: value,
        orderEstimation: parseFloat(value) * parseFloat(this.state.quantity)
    })
}}

如您在两种情况下所见：orderEstimation: parseFloat(value) * parseFloat(this.state.quantity)

我有一个案例 this.props.selectedTitleDetails.exchangeHost == "THIS_TEXT" 我想改变计算 parseFloat(value) * parseFloat(this.state.quantity) / 100

如何在这两种情况下应用此更改？在生命周期和方法中？

Answer 1

您可以使用状态变量来标记- exchangeValue。示例：

constructor() {
    this.state = {
        exchangeValue: 1
    }
}

componentDidUpdate(prevProps) {
     if (prevProps.selectedTitleDetails.exchangeHost !== this.props.selectedTitleDetails.exchangeHost 
         && this.props.selectedTitleDetails.exchangeHost === 'THIS_TEXT') {
          this.setState({
               exchangeValue: 100
          })
     }
}

然后您将 this.state.exchangeValue 添加到您的计算中

componentDidMount(){
  if (this.props.isRestarted) {
    this.setState({
          orderEstimation: this.props.formData.valNominal * this.props.formData.priceLimit / this.state.exchangeValue,
   })
}

和

onChangeText={(value) => {
    this.setState({
        price: value,
        orderEstimation: parseFloat(value) * parseFloat(this.state.quantity) / this.state.exchangeValue
    })
}}

根据 props 值反应标记计算

React Flagging a Calculation based on props value

javascript

lifecycle

setstate

reactjs