ReactJS का उपयोग करके इनपुट फ़ील्ड का मान कैसे प्राप्त करें?

Question

मेरे पास निम्नलिखित प्रतिक्रिया घटक है:

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        var title = this.title;
        console.log(title);
    }

    render(){
        return (
            ...
            <form className="form-horizontal">
                ...
                <input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" onClick={this.onSubmit} className="btn">Save</button>
            ...
        );
    }

};

कंसोल मुझे दे रहा है undefined- कोई भी विचार इस कोड में क्या गलत है?

Comments

this.onSubmit.bind(this);

— झटके

नाइस - इसे उत्तर के रूप में जोड़ना चाहते हैं और मैं इसे बंद कर

— दूंगा

किस बारे में e.target.valueबाँध के बिना?

— सर्वजन्म

e.target.value बटन को लक्षित नहीं किया जाएगा, इनपुट फ़ील्ड को नहीं?

— जोईटी

onSubmitक्लिक करने पर (यानी onClick={this.onSubmit.bind(this)}) सबमिट बटन (DOM एलिमेंट) के लिए आपको विधि को बाँधने की आवश्यकता है । और यदि आप उस शीर्षक इनपुट के मूल्य तक पहुँचना चाहते हैं जिस रूप में आप उपयोग कर सकते हैं onSubmit(event) { const title = event.target.elements.title.value; }।

— tfmontague

Answer 1

आपको वर्ग का उपयोग करना चाहिए वर्ग के तहत MyComponent React.Component का विस्तार करता है

constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

तब आपको शीर्षक का परिणाम मिलेगा

Answer 2

यहाँ तीन उत्तर दिए गए हैं, प्रतिक्रिया के संस्करण पर निर्भर करता है कि आप किसके साथ काम करने के लिए मजबूर हैं (और क्या आप हुक का उपयोग करना चाहते हैं)।

पहली चीजें पहले:

यह समझना महत्वपूर्ण है कि रिएक्ट कैसे काम करता है, इसलिए आप चीजों को ठीक से कर सकते हैं (प्रोटिप: यह सुपर है रिएक्ट वेबसाइट पर रिएक्ट ट्यूटोरियल व्यायाम के माध्यम से चलने मूल्य है। यह अच्छी तरह से लिखा गया है, और सभी मूल बातें इस तरह से कवर करता है जो वास्तव में समझाता है कि कैसे करना है। चीजें)। यहां "उचित रूप से" का अर्थ है कि आप एक एप्लिकेशन इंटरफ़ेस लिख रहे हैं जो किसी ब्राउज़र में प्रदान किया जाना है; सभी इंटरफ़ेस का काम रिएक्ट में होता है, न कि "यदि आप एक वेब पेज लिख रहे हैं तो इसका क्या उपयोग किया जाता है" (यह इसलिए कि रिएक्ट ऐप "ऐप" हैं, "वेब पेज" नहीं)।

रिएक्ट एप्लिकेशन दो चीजों के आधार पर प्रस्तुत किए जाते हैं:

1. जो भी माता-पिता द्वारा घोषित घटक के गुण उस घटक का एक उदाहरण बनाता है, जिसे माता-पिता अपने जीवन चक्र में संशोधित कर सकते हैं, और
2. घटक की अपनी आंतरिक स्थिति, जिसे वह स्वयं अपने जीवनचक्र में संशोधित कर सकता है।

जब आप प्रतिक्रिया का उपयोग नहीं करते हैं, तो आप HTML तत्वों को उत्पन्न कर रहे हैं और फिर उन का उपयोग करके स्पष्ट रूप से नहीं कर रहे हैं: जब आप प्रतिक्रिया का उपयोग करने <input>के लिए कहते हैं, उदाहरण के लिए, आप एक HTML इनपुट तत्व नहीं बना रहे हैं, तो आप प्रतिक्रिया को एक इनपुट इनपुट ऑब्जेक्ट बनाने के लिए कह रहे हैं HTML इनपुट तत्व के रूप में रेंडर करने के लिए होता है , और जिसका ईवेंट हैंडलिंग दिखता है, लेकिन HTML तत्व के इनपुट इवेंट द्वारा नियंत्रित नहीं किया जाता है।

प्रतिक्रिया का उपयोग करते समय, आप जो कर रहे हैं वह एप्लिकेशन UI तत्वों को उत्पन्न कर रहा है जो उपयोगकर्ता को (अक्सर जोड़-तोड़ करने वाले) डेटा के साथ पेश करते हैं, उपयोगकर्ता इंटरैक्शन के साथ घटक की स्थिति को बदलते हैं, जिससे नए एप्लिकेशन को प्रतिबिंबित करने के लिए आपके एप्लिकेशन इंटरफ़ेस के हिस्से का एक रेंडर हो सकता है। इस मॉडल में, राज्य हमेशा अंतिम प्राधिकरण होता है, न कि "जो भी यूआई लाइब्रेरी इसे रेंडर करने के लिए उपयोग किया जाता है", जो वेब पर ब्राउज़र का DOM है। इस प्रोग्रामिंग मॉडल में DOM का लगभग नामोनिशान है: यह सिर्फ यूआई फ्रेमवर्क है जो रिएक्ट का उपयोग करता है।

तो इनपुट तत्व के मामले में, तर्क यह है:

1. आप इनपुट तत्व में टाइप करते हैं,
2. आपके इनपुट तत्व के बारे में अभी तक कुछ नहीं हुआ है, इस घटना को रिएक्ट ने रोक दिया और तुरंत मार दिया ,
3. इवेंट हैंडलिंग के लिए आपके द्वारा सेट किए गए फ़ंक्शन के लिए आगे की ओर प्रतिक्रिया करें,
4. वह फ़ंक्शन राज्य अद्यतन को शेड्यूल कर सकता है ,
5. यदि ऐसा होता है, तो रिएक्ट उस राज्य अपडेट को चलाता है (एसिंक्रोनस रूप से!) और renderअपडेट के बाद कॉल को ट्रिगर करेगा , लेकिन केवल तभी जब स्टेट अपडेट ने राज्य को बदल दिया ।
6. यह रेंडर होने के बाद ही यूआई दिखाएगा कि आपने "एक पत्र टाइप किया है"।

यह सब मिलिसेकंड के एक मामले में होता है, यदि कम नहीं है, तो ऐसा लगता है कि आपने इनपुट तत्व में उसी तरह से टाइप किया है जिस तरह से आप "सिर्फ एक पृष्ठ पर एक इनपुट तत्व का उपयोग कर रहे हैं", लेकिन यह बिल्कुल वैसा नहीं है हो गई।

तो, उस के साथ कहा, कैसे प्रतिक्रिया में तत्वों से मूल्यों को प्राप्त करने के लिए:

15 और नीचे, ES5 के साथ प्रतिक्रिया करें

चीजों को ठीक से करने के लिए, आपके घटक का एक राज्य मान है, जो एक इनपुट फ़ील्ड के माध्यम से दिखाया गया है, और हम इसे अपडेट कर सकते हैं कि UI तत्व घटक में परिवर्तन की घटनाओं को वापस भेजते हैं:

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },

  updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

इसलिए हम रिएक्ट को updateInputValueउपयोगकर्ता इंटरैक्शन को संभालने के लिए फ़ंक्शन का उपयोग setStateकरने के लिए, स्टेट अपडेट को शेड्यूल करने के लिए उपयोग करने के लिए और इस तथ्य पर renderटैप करने का this.state.inputValueमतलब बताते हैं कि जब यह राज्य को अपडेट करने के बाद रेंडर करता है, तो उपयोगकर्ता अपडेट किए गए टेक्स्ट को उनके द्वारा टाइप किए गए के आधार पर देखेंगे।

टिप्पणियों के आधार पर परिशिष्ट

यह देखते हुए कि यूआई इनपुट राज्य मूल्यों का प्रतिनिधित्व करते हैं (विचार करें कि क्या होता है यदि कोई उपयोगकर्ता अपने टैब मिडवे को बंद कर देता है, और टैब को पुनर्स्थापित किया जाता है। क्या उन सभी मूल्यों को जिन्हें वे बहाल करना चाहते हैं? यदि हां, तो वह राज्य है)। यह आपको महसूस करवा सकता है कि एक बड़े फॉर्म में दसियों या सौ इनपुट फॉर्म की जरूरत है, लेकिन रिएक्ट आपके यूआई को बनाए रखने योग्य तरीके से मॉडलिंग करने के बारे में है: आपके पास 100 स्वतंत्र इनपुट फ़ील्ड नहीं हैं, आपके पास संबंधित इनपुट के समूह हैं, इसलिए आप प्रत्येक पर कब्जा करते हैं। एक घटक में समूह और फिर समूहों के संग्रह के रूप में अपने "मास्टर" फॉर्म का निर्माण करें।

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

यह भी एक विशाल एकल फार्म घटक की तुलना में बनाए रखने के लिए बहुत आसान है। राज्य रखरखाव के साथ घटकों में समूहों को विभाजित करें, जहां प्रत्येक घटक एक समय में कुछ इनपुट फ़ील्ड को ट्रैक करने के लिए केवल जिम्मेदार होता है।

आपको यह भी महसूस हो सकता है कि यह सब कोड लिखने के लिए "एक परेशानी" है, लेकिन यह एक झूठी बचत है: डेवलपर्स-जो-आप-नहीं-भविष्य में आप भविष्य सहित, वास्तव में उन सभी इनपुटों को देखने से बहुत लाभान्वित होते हैं, क्योंकि स्पष्ट रूप से यह कोड पथ को ट्रेस करने के लिए बहुत आसान बनाता है। हालाँकि, आप हमेशा ऑप्टिमाइज़ कर सकते हैं। उदाहरण के लिए, आप एक स्टेट लिंकर लिख सकते हैं

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",
      lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },
  componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },
  render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});

बेशक, इस के बेहतर संस्करण हैं, इसलिए https://npmjs.com पर हिट करें और एक रिएक्ट स्टेट लिंकिंग सॉल्यूशन की खोज करें जो आपको सबसे अच्छा लगे। ओपन सोर्स ज्यादातर दूसरों को पहले से ही पता लगाने के बारे में है, और उपयोग करने के बजाय खरोंच से खुद को सब कुछ लिखने के लिए।

प्रतिक्रिया 16 (और 15.5 संक्रमणकालीन) और 'आधुनिक' जेएस

16 रिएक्ट के रूप में (और 15.5 के साथ सॉफ्ट-स्टार्ट) createClassकॉल अब समर्थित नहीं है, और क्लास सिंटैक्स का उपयोग करने की आवश्यकता है। यह दो चीजों को बदल देता है: स्पष्ट वर्ग वाक्य रचना, लेकिन यह भी thisसंदर्भ बंधन जो createClass"मुफ्त में" कर सकता है, इसलिए यह सुनिश्चित करने के लिए कि अभी भी काम करना सुनिश्चित करें कि आप "वसा तीर" संकेतन का उपयोग कर रहे हैं thisसंदर्भ के लिए अनाम कार्यों में अनाम कार्यों को संरक्षित करना onWhatever, जैसे onChangeकोड यहाँ हम उपयोग करें:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      //...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

आपने bindअपने निर्माणकर्ता को अपने सभी ईवेंट हैंडलिंग कार्यों के लिए उनके निर्माण में उपयोग करते देखा होगा , जैसे:

constructor(props) {
  super(props);
  this.handler = this.handler.bind(this);
  ...
}

render() {
  return (
    ...
    <element onclick={this.handler}/>
    ...
  );
}

ऐसा मत करो।

लगभग किसी भी समय आप उपयोग कर रहे हैं bind, लौकिक "आप इसे गलत कर रहे हैं" लागू होता है। आपकी कक्षा पहले से ही वस्तु प्रोटोटाइप को परिभाषित करती है, और इसलिए पहले से ही उदाहरण के संदर्भ को परिभाषित करती है। bindउस के ऊपर मत डालो ; कंस्ट्रक्टर में अपने सभी फ़ंक्शन कॉल को डुप्लिकेट करने के बजाय सामान्य ईवेंट फ़ॉरवर्डिंग का उपयोग करें, क्योंकि दोहराव आपकी बग सतह को बढ़ाता है, और त्रुटियों को ट्रेस करना बहुत कठिन बना देता है क्योंकि समस्या आपके कंस्ट्रक्टर में हो सकती है बजाय इसके कि आप अपने कोड को कहां से कॉल करें। काम करने के लिए दूसरों के साथ-साथ उन पर रखरखाव का बोझ रखें।

हां, मुझे पता है कि प्रतिक्रिया डॉक्स कहना ठीक है। यह नहीं है, यह मत करो।

हुक के साथ फ़ंक्शन घटकों का उपयोग करके 16.8 प्रतिक्रिया करें

रिएक्ट 16.8 के रूप में फंक्शन कंपोनेंट (यानी शाब्दिक रूप से सिर्फ एक फंक्शन जो कुछ propsको तर्क के रूप में लेता है, जैसे कि यह एक घटक वर्ग का एक उदाहरण हो सकता है, कभी क्लास लिखे बिना भी) हुक के उपयोग के माध्यम से राज्य दिया जा सकता है ।

यदि आपको पूर्ण श्रेणी कोड की आवश्यकता नहीं है, और एक एकल उदाहरण फ़ंक्शन करेगा, तो अब आप useStateहुक का उपयोग खुद को एक एकल राज्य चर प्राप्त करने के लिए कर सकते हैं , और इसका अद्यतन फ़ंक्शन, जो उपरोक्त उदाहरणों के बिना लगभग समान काम करता है, बिना setStateसमारोह कॉल:

import { useState } from 'react';

function myFunctionalComponentFunction() {
  const [input, setInput] = useState(''); // '' is the initial state value
  return (
    <div>
    <label>Please specify:</label>
    <input value={input} onInput={e => setInput(e.target.value)}/>
    </div>
  );
}

पहले वर्गों और फ़ंक्शन घटकों के बीच अनौपचारिक अंतर "फ़ंक्शन घटकों की स्थिति नहीं है", इसलिए हम उस एक के पीछे नहीं छिपा सकते हैं: फ़ंक्शन घटकों और कक्षाओं के घटकों के बीच का अंतर बहुत अच्छी तरह से कई पृष्ठों में फैल सकता है। -लेखित प्रतिक्रिया प्रलेखन (आपके लिए सुविधाजनक रूप से गलत व्याख्या करने के लिए कोई भी एक लाइनर स्पष्टीकरण नहीं है!) जिसे आपको पढ़ना चाहिए ताकि आप जान सकें कि आप क्या कर रहे हैं और इस प्रकार जान सकते हैं कि क्या आपने खुद को प्रोग्राम करने के लिए सबसे अच्छा (जो कुछ भी आपके लिए मतलब है) उठाया। आप कर रहे हैं एक समस्या से बाहर।

Comments

मैंने कुछ ऑनलाइन लेख पढ़े हैं जो कहते हैं कि बहुत अधिक राज्य का उपयोग करना एक बुरा विचार है। मेरे आवेदन के एक विशेष रूप में मेरे पास लगभग 100 फॉर्म फ़ील्ड हैं। राज्य को बचाने के लिए एक फ़ंक्शन को परिभाषित करना चीजों को करने के एक अनावश्यक रूप से कठिन तरीके से महसूस करता है। अगर मैं onClick = {this.onSubmit.bind (यह)} का उपयोग कर सकता हूं, तो यह मान प्राप्त करने के लिए एक अच्छा तरीका लगता है (फिर यदि मैं चाहता हूं, घटकों को सेट करें) - मैं इस पर कुछ टिप्पणियों की सराहना करूंगा।

— जोईटी

इसलिए स्मार्ट कोड लिखें। प्रपत्र इनपुट सबसे निश्चित रूप से राज्य होते हैं (विचार करें कि क्या होता है यदि कोई उपयोगकर्ता अपने टैब मिडवे को बंद कर देता है, और टैब को पुनर्स्थापित किया जाता है। क्या उन सभी मूल्यों को जिन्हें वे बहाल करना चाहते हैं? हां? वह राज्य है ), इसलिए राज्य रखरखाव कोड का एक सा लिखें। फ़ेसबुक के सैकड़ों फॉर्म वैल्यूज़ भी हैं, और उनके पागलपन का हल रिएक्ट था। यह वास्तव में अच्छी तरह से काम करता है । राज्य का उपयोग करते हुए, अपने कोड को थोड़ा आसान बनाने का एक तरीका, दो तरह से स्टेट लिंकिंग का उपयोग करना है , फिर से, रिएक्ट साइट पर समझाया गया है। पढ़ने योग्य! =)

— बजे माइक 'पोमैक्स' कमरमन्स

यह भी ध्यान दें कि "100 फ़ील्ड" ज्यादातर अप्रासंगिक है: अपने फॉर्म को विभाजित करें, क्योंकि यह 100 तत्व नहीं है, यह कई खंड हैं, प्रत्येक में कई इनपुट होते हैं, इसलिए अच्छे डिज़ाइन को लागू करें और प्रत्येक अनुभाग को अपने घटकों को समूह बनाने के लिए बनाएं समूहों। यह आमतौर पर 10 से कम इनपुट के लिए एक घटक को जिम्मेदार बनाता है, और अचानक आपकी सूचना वास्तुकला बहुत अधिक समझ में आता है। फ़ॉर्म सबमिट, एक ब्राउज़र कार्रवाई के रूप में, निश्चित रूप से "आपका फ़ॉर्म" देखता है और सब कुछ एक बार में सबमिट करता है। स्वच्छ, लक्षित यूआई डिजाइन।

— माइक 'पोमैक्स' कमेरमन्स

टिप्पणियों के लिए धन्यवाद। मैंने हालांकि यह देखा कि रिएक्ट v15 के रूप में स्टेट लिंकिंग को हटा दिया गया है।

— जोएटी

@JasonChing तो आप बस अपने कोड में संभावित बग बनाया है। प्रतिक्रिया वेब पृष्ठों के लिए "सभी, अंत सबका समाधान" नहीं है, यह इंटरफेस बनाने के लिए एक रूपरेखा है, और यह राज्य प्रबंधन और वास्तविक यूआई प्रतिपादन के लिए जिम्मेदार है क्योंकि बाद में (आपके उपयोगकर्ता डोम के साथ बातचीत नहीं करते हैं, वे साथ बातचीत करते हैं प्रतिक्रिया। डीओएम अपडेट बस एक अतुल्यकालिक (लेकिन अविश्वसनीय रूप से तेज़) अंतिम चरण हैं ताकि यूआई नेत्रहीन राज्य को प्रतिबिंबित करें)। यदि आप इसे बायपास करना चाहते हैं, तो अधिक महत्वपूर्ण सवाल यह है: आप रिएक्ट का उपयोग क्यों कर रहे हैं? क्योंकि जो सबसे अच्छा संकेत आप उपयोग कर रहे हैं वह गलत है, प्रतिक्रिया और jQuery का संयोजन है।

— माइक 'पोमैक्स' कामेरमें

Answer 3

इस तरह से कुछ करके इनपुट फील्ड वैल्यू पाने में कामयाब:

import React, { Component } from 'react';

class App extends Component {

constructor(props){
super(props);

this.state = {
  username : ''
}

this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


updateInput(event){
this.setState({username : event.target.value})
}


handleSubmit(){
console.log('Your input value is: ' + this.state.username)
//Send state to the server code
}



render(){
return (
    <div>
    <input type="text" onChange={this.updateInput}></input>
    <input type="submit" onClick={this.handleSubmit} ></input>
    </div>
  );
}
} 

//output
//Your input value is: x

Comments

क्यों "setState" का उपयोग कर रहे हैं? इसमें पुन: प्रतिपादन शामिल है..नहीं?

— लुका दावानजो

Answer 4

16 प्रतिक्रिया में, मैं उपयोग करता हूं

<Input id="number" 
       type="time" 
       onChange={(evt) => { console.log(evt.target.value); }} />

Comments

यदि कार्य आयु भार पर स्वचालित रूप से आबादी वाला था तो काम नहीं करता है

— SeanMC

Answer 5

मैं फ़ंक्शन अपडेटInputValue (evt) के साथ "यह" बाइंड करके ऐसा करने में सफल रहा

this.updateInputValue = this.updateInputValue.bind (यह);

हालाँकि इनपुट वैल्यू = {this.state.inputValue} ... निकला कोई अच्छा विचार नहीं है।

यहाँ babel ES6 में पूर्ण कोड है:

class InputField extends React.Component{


  constructor(props){
   super(props);
   //this.state={inputfield: "no value"};   
   this.handleClick = this.handleClick.bind(this);
   this.updateInputValue = this.updateInputValue.bind(this);
  }

  handleClick(){
   console.log("trying to add picture url");
   console.log("value of input field : "+this.state.inputfield);

  }

  updateInputValue(evt){
    //console.log("input field updated with "+evt.target.value);
    this.state={inputfield: evt.target.value};   

  }

  render(){
    var r; 
    r=<div><input type="text" id="addpixinputfield" 
            onChange={this.updateInputValue} />
      <input type="button" value="add" id="addpix" onClick={this.handleClick}/>
      </div>;    
    return r;
   }
}

Answer 6

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

यदि आप अपना सबमिट बटन सही करते हैं तो यह कार्य होना चाहिए:

<button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>

और यदि आप कंसोल में उस इनपुट का मूल्य दिखाना चाहते हैं, तो आपको var शीर्षक = this.title.value का उपयोग करना चाहिए;

Comments

यदि आप "इस" के बारे में अधिक जानना चाहते हैं तो यह लिंक मददगार हो सकता है

— सोरूस बीके

medium.com/@housecor/…

— सोरूस बीके

Answer 7

<input>एक अनोखी आईडी दें

<input id='title' ...>

और फिर DOM में रेफर करने के लिए मानक Web API का उपयोग करें

const title = document.getElementById('title').value

लगातार हर कीप के साथ प्रतिक्रिया स्थिति को अपडेट करने की आवश्यकता नहीं है। जब यह आवश्यक हो तभी मूल्य प्राप्त करें।

Answer 8

// On the state
constructor() {
  this.state = {
   email: ''
 }
}

// Input view ( always check if property is available in state {this.state.email ? this.state.email : ''}

<Input 
  value={this.state.email ? this.state.email : ''} 
  onChange={event => this.setState({ email: event.target.value)}
  type="text" 
  name="emailAddress" 
  placeholder="[e-mail]" />

Comments

हालांकि आपका उत्तर प्रश्न के लिए अच्छा हो सकता है लेकिन कुछ स्पष्टीकरण जोड़ना हमेशा बेहतर होता है। कृपया इसे जोड़ने के लिए 2 मिनट का समय लें। यह आपके उत्तर को भविष्य के उपयोगकर्ताओं के लिए भी बेहतर बनाएगा।

— DaFois

यकीन है, मैं ऐसा करूंगा।

— किडली केविन

Answer 9

आप 'onChange' फ़ंक्शन को जोड़े बिना एक इनपुट मान प्राप्त कर सकते हैं।

बस इनपुट तत्व में जोड़ें 'रेफरी अटर:

और तब इनपुट मान प्राप्त करने के लिए इस का उपयोग करें। जब आपको इसकी आवश्यकता हो।

Comments

यह अब अनुशंसित नहीं है।

— जोटीडे

आप उनका उपयोग कर सकते हैं, लेकिन प्रॉप्स और कॉलबैक का उपयोग करके डेटा प्रवाह को एक दिशा में रखने की सिफारिश की जाती है।

— जोईडेई

रीफ्स को सही तरीके से जोड़ने का एक उदाहरण जोड़ना अच्छा होगा, एक विरासत स्ट्रिंग के बजाय रेफ कॉलबैक का उपयोग करना।

— जोटीडे

Answer 10

अपने रेफरी को इसमें बदलें: ref='title'और डिलीट करें name='title' फिर डिलीट करें var title = this.titleऔर लिखें:

console.log(this.refs.title.value)

इसके अलावा, आप जोड़ना चाहिए .bind(this)करने के लिएthis.onSubmit

(इसने मेरे मामले में काम किया, जो काफी समान था, लेकिन इसके बजाय onClickमेरे पास था onSubmit={...}और इसे फॉर्म में डाल दिया गया था <form onSubmit={...} ></form>))

Answer 11

यदि आप कक्षा के घटक का उपयोग करते हैं तो केवल 3 चरण- पहले आपको अपने इनपुट के लिए राज्य को घोषित करने की आवश्यकता है। उदाहरण के लिए यह दर्ज करें। {= name: ''} । दूसरे, आपको स्टेट सेट करने के लिए एक फ़ंक्शन लिखना होगा जब वह bellow उदाहरण में बदल जाता है तो यह setName () होता है और अंत में आपको उदाहरण के लिए इनपुट jsx लिखना पड़ता है <input value = {this.name} onChange = {thisset। Name} />

import React, { Component } from 'react'

export class InputComponents extends Component {
    constructor(props) {
        super(props)

        this.state = {
             name:'',
             agree:false
        }
        this.setName = this.setName.bind(this);
        this.setAgree=this.setAgree.bind(this);
    }

    setName(e){
        e.preventDefault();
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    setAgree(){
        this.setState({
            agree: !this.state.agree
        }, function (){
            console.log(this.state.agree);
        })
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.agree} onChange={this.setAgree}></input>
                < input value={this.state.name} onChange = {this.setName}/>
            </div>
        )
    }
}

export default InputComponents

Answer 12

export default class MyComponent extends React.Component {

onSubmit(e) {
    e.preventDefault();
    var title = this.title.value; //added .value
    console.log(title);
}

render(){
    return (
        ...
        <form className="form-horizontal">
            ...
            <input type="text" className="form-control" ref={input => this.title = input} name="title" />
            ...
        </form>
        ...
        <button type="button" onClick={this.onSubmit} className="btn">Save</button>
        ...
    );
}

};

Answer 13

अनियंत्रित खेतों का उपयोग:

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        console.log(e.target.neededField.value);
    }

    render(){
        return (
            ...
            <form onSubmit={this.onSubmit} className="form-horizontal">
                ...
                <input type="text" name="neededField" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" className="btn">Save</button>
            ...
        );
    }

};