Reactjs के साथ एक इनपुट फ़ील्ड साफ़ करें?

Question

मैं नीचे एक चर का उपयोग कर रहा हूँ।

var newInput = { 
    title: this.inputTitle.value, 
    entry: this.inputEntry.value  
}; 

यह मेरे इनपुट फ़ील्ड द्वारा उपयोग किया जाता है।

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} /> 
    <textarea id="inputage" ref={el => this.inputEntry = el} className="form-control"></textarea> 
     <button className="btn btn-info" onClick={this.sendthru}>Add</button> 

एक बार जब मैं {this.sendthru} सक्रिय करता हूं तो मैं अपने इनपुट फ़ील्ड को साफ़ करना चाहता हूं। हालांकि, मुझे अनिश्चितता है कि ऐसा कैसे करें।

इसके अलावा, जैसा कि इस उदाहरण में दिखाया गया है, यह मुझे बताया गया था कि मुझे इनपुट मानों के लिए ref संपत्ति का उपयोग करना चाहिए। जो मैं अस्पष्ट हूं वह {el => this.inputEntry = el} होने का क्या मतलब है। इस स्थिति में el का महत्व क्या है?

Answer 1

मुझे लगता है कि आपने 'sendThru' फ़ंक्शन का 'यह' बाध्यकारी किया है।

निम्न कार्य फ़ंक्शन ट्रिगर होने पर इनपुट फ़ील्ड को साफ़ करता है।

sendThru() { 
    this.inputTitle.value = ""; 
    this.inputEntry.value = ""; 
} 

Refs के रूप में इनलाइन समारोह अभिव्यक्ति लिखा जा सकता है:

ref={el => this.inputTitle = el} 

जहां el घटक को दर्शाता है।

जब रेफरी ऊपर की तरह लिखे जाते हैं, तो प्रत्येक अद्यतन पर प्रतिक्रिया प्रत्येक बार एक अलग फ़ंक्शन ऑब्जेक्ट को देखती है, रेफ को घटक उदाहरण के साथ कॉल करने से पहले तुरंत शून्य के साथ बुलाया जाएगा।

इसके बारे में और पढ़ें here।

Answer 2

मुझे वाक्यविन्यास {el => this.inputEntry = el} का सचमुच यकीन नहीं है, लेकिन इनपुट फ़ील्ड को साफ़ करते समय आप एक रेफरी निर्दिष्ट करते हैं जैसे आपने उल्लेख किया है।

<input type="text" ref="someName" /> 

onClick समारोह में

फिर बाद आप इनपुट मूल्य समाप्त करने के बाद बस का उपयोग करें ...

this.refs.someName.value = ''; 

संपादित

असल {एल => this.inputEntry = el} जैसा मैं मानता हूं वैसा ही है। शायद कोई मुझे सही कर सकता है। संदर्भ के रूप में कार्य करने के लिए एल के लिए मूल्य कहीं से गुजरना होगा।

function (el) { 
    this.inputEntry = el; 
} 

Answer 3

इनपुट टैग के लिए प्रचार मूल्य विशेषता (यानी value= {this.state.name}) और आप इस इनपुट साफ़ करना चाहते हैं vale आप अपने संदर्भ के लिए this.setState({name : ''})

PFB काम कर कोड का उपयोग करने के लिए है:

<script type="text/babel"> 
    var StateComponent = React.createClass({ 
     resetName : function(event){ 
      this.setState({ 
       name : '' 
      }); 
     }, 
     render : function(){ 
      return (
       <div> 
        <input type="text" value= {this.state.name}/> 
        <button onClick={this.resetName}>Reset</button> 
       </div> 
      ) 
     } 
    }); 
    ReactDOM.render(<StateComponent/>, document.getElementById('app')); 
</script>