मेरे कोड में, मैं प्रतिक्रिया जेएस में ईवेंट विधि का उपयोग करके विशेष राज्य चर के लिए एक मान सेट करने का प्रयास कर रहा हूं। और रियायती मूल्य के लिए कुछ गणना भी करें। गणना के बाद, अद्यतन मान को स्थिति में सेट करें। लेकिन अगली घटना होने पर इसे हाल ही में अपडेट किया जाना चाहिए।

this.state = {
    isAddVariant: false,

    vendors: [],
    variant_price: '',
    variant_priceDiscount: '',
    variant_priceDiscounted: '',
    variant_unit: '',
    variants: [],
}
onVariantType = (e) => {

    this.setState({
      [e.target.name]: e.target.value,
    })

    if (e.target.name === 'variant_price' || e.target.name === 'variant_priceDiscount') {
      let variant_priceDiscounted = this.state.variant_priceDiscount !== '' ? (this.state.variant_price - (this.state.variant_price * (this.state.variant_priceDiscount / 100))).toFixed(2) : this.state.variant_price
      this.setState({ variant_priceDiscounted })
    }

  }

// रेंडर फंक्शन

<Typography variant="h7" color="inherit" style={{ marginTop: 20 }}>
  Add Product Variants
</Typography>

<Grid container spacing={24}>
  {/* Input - Price */}
  <Grid item xs={2}>
    <TextField
      type={'number'}
      name={'variant_price'}
      value={nullToEmptyString(variant_price)}
      onChange={this.onVariantType}
      label={'Price'}
      placeholder={'Enter price in ₹'}
      required={true}
      margin={'dense'}
      autoComplete={'off'}
      fullWidth
    />
  </Grid>

  {/* Input - Unit */}
  <Grid item xs={2}>
    <TextField
      name={'variant_unit'}
      value={nullToEmptyString(variant_unit)}
      onChange={this.onVariantType}
      label={'Unit'}
      placeholder={'Enter unit (eg: kg)'}
      required={true}
      margin={'dense'}
      autoComplete={'off'}
      fullWidth
    />
  </Grid>

  {/* Input - Discount */}
  <Grid item xs={2}>
    <TextField
      type={'number'}
      name={'variant_priceDiscount'}
      value={nullToEmptyString(variant_priceDiscount)}
      onChange={this.onVariantType}
      label={'Discount'}
      placeholder={'Enter discount in %'}
      margin={'dense'}
      autoComplete={'off'}
      fullWidth
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      type={'number'}
      name={'variant_priceDiscounted'}
      value={nullToEmptyString(variant_priceDiscounted)}
      label={'Discounted Price'}
      margin={'dense'}
      autoComplete={'off'}
      disabled
      fullWidth
    />
  </Grid>
  <Grid item xs={2}>
    {/* Button - Add */}
    <IconButton
      type={'add'}
      aria-label={'Add'}
      color={'primary'}
      onClick={this.onAddVariant}
    >
      <IconCheck />
    </IconButton>
  </Grid>
</Grid>

अपेक्षित व्यवहार अपडेट किया गया था रियायती मूल्य की गणना की जाती है और तुरंत प्रदर्शित किया जाता है।
वास्तविक व्यवहार हाल ही में अद्यतन किया गया मूल्य था वास्तविक व्यवहार छवि:
वास्तविक व्यवहार छवि

1
Karthikeyan P 9 सितंबर 2019, 15:03

1 उत्तर

सबसे बढ़िया उत्तर

setState async है, और स्थिति को अपडेट करने के लिए समय निकालें। setState एक कॉलबैक लेता है, आप इसका उपयोग कर सकते हैं,

onVariantType = (e) => {
    let name = e.target.name; //store the name in a variable to use in callback
    this.setState({
      [e.target.name]: e.target.value,
    }, () => { 
      if (name === 'variant_price' || name === 'variant_priceDiscount') {
        let variant_priceDiscounted = this.state.variant_priceDiscount !== '' ? (this.state.variant_price - (this.state.variant_price * (this.state.variant_priceDiscount / 100))).toFixed(2) : this.state.variant_price
        this.setState({ variant_priceDiscounted })
      }
    })
}

नोट: हमने e.target.name को एक name वेरिएबल में स्टोर किया है, क्योंकि seState के निष्पादन के बाद e शून्य हो जाता है। Synthetic events के बारे में और पढ़ें।

1
ravibagul91 10 सितंबर 2019, 06:09