एक प्रतिक्रिया नियंत्रित रूप में, एक संख्या इनपुट के लिए सही प्रारंभिक मूल्य क्या है?

अगर मैं myNumber को '', [], या {} पर सेट करता हूं, तो यह काम करता है, लेकिन ऑन चेंज मान 25 के बजाय "25" हो जाता है और फिर मुझे इसे वापस एक पूर्णांक में बदलना है। अगर मैं इसे 0 के रूप में सेट करता हूं तो मेरा इनपुट 0 के साथ इसके मान के रूप में लोड होता है और मैं इनपुट लोड को खाली करना चाहता हूं।

ऐसा करने का सबसे अच्छा तरीका क्या है?

संपादित करें: नीचे दी गई सभी टिप्पणियां और उत्तर मूल्य को परिवर्तन पर सेट/रूपांतरित करने पर केंद्रित हैं। मेरा प्रश्न यह पुष्टि करना है कि यह एकमात्र विकल्प है या नहीं। यदि यह एक सरणी होती, तो हम एक खाली सरणी से शुरू करते; एक वस्तु एक खाली वस्तु के रूप में शुरू होगी; एक स्ट्रिंग एक खाली स्ट्रिंग के रूप में शुरू होगी।

क्या किसी संख्या की स्थिति को किसी अन्य प्रकार के रूप में सेट करने और फिर उसे परिवर्तित करने का एकमात्र तरीका है?

class NumberForm extends Component {
  state = {
    myNumber: ''
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  render() {
    return (
      <form>
        <input
          type="number"
          name="myNumber"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}
3
kburgie 23 सितंबर 2019, 15:22
जब आप पूर्णांक 0 से प्रारंभ करते हैं, तो क्या अद्यतन मान पूर्णांक बना रहता है?
 – 
sigmus
23 सितंबर 2019, 15:25
2
इसे आजमाएं this.setState({ [name]: parseInt(value) })
 – 
ravibagul91
23 सितंबर 2019, 15:27
MyNumber डिफ़ॉल्ट को 0 पर सेट करें और अपने इनपुट में मान को this.state.myNumber != 0 ? this.state.myNumber पर सेट करें
 – 
Furkan Poyraz
23 सितंबर 2019, 15:27
आपके फ़ील्ड में संख्यात्मक मान है तो आप सीधे 0 को प्रारंभिक मान के रूप में उपयोग कर सकते हैं लेकिन आप टेक्स्ट बॉक्स में प्रारंभिक मान के रूप में 0 मान देखेंगे जो कि मुद्दा है।
 – 
ankitkanojia
23 सितंबर 2019, 15:28
यदि आप ' ' का उपयोग करते हैं तो यह खाली मान के रूप में माना जाएगा, इसलिए यह टेक्स्ट बॉक्स में कुछ भी प्रदर्शित नहीं करेगा लेकिन असाइन करते समय स्ट्रिंग मान के रूप में विचार करेगा।
 – 
ankitkanojia
23 सितंबर 2019, 15:29

3 जवाब

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

आपको int को पार्स करना चाहिए क्योंकि मान Event.target.value से पढ़ा जा रहा है जो आपको हमेशा स्ट्रिंग देगा

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: parseInt(value, 10) })
  }
2
Anil Namde 23 सितंबर 2019, 15:33
अच्छा उत्तर है, लेकिन हमें राज्य में भी स्ट्रिंग मानों पर विचार करने की आवश्यकता है।
 – 
Tony Lucas
2 अक्टूबर 2021, 01:40

सेटस्टेट का उपयोग करते समय आप parseInt का उपयोग कर सकते हैं:

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: parseInt(value) })
  }

लेकिन शायद parseInt निष्पादित करने से पहले मान को मान्य करना आवश्यक है, क्योंकि Received NaN for thevalueattribute. If this is expected, cast the value to a string. जैसी त्रुटि हो सकती है

तो शायद try/catch से आपकी समस्या का समाधान हो सकता है:

  handleChange = (e) => {
    const { name, value } = e.target

    try {
      this.setState({ [name]: parseInt(value) })
    } catch (e) {
      this.setState({ [name]: 0})
    }
  }
0
Fuechter 23 सितंबर 2019, 15:34
class NumberForm extends Component {
  state = {
    myNumber:parseInt('')
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
//this.setState({ [name]: parseInt(value, 10) })
  }

  render() {
    return (
      <form>
        <input
          type="number"
          name="myNumber"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}

यह आपके राज्य और html तत्व को खाली में शुरू करने के लिए काम कर सकता है

0
nativelectronic 13 अगस्त 2020, 04:48