React
प्रपत्र और उपयोगकर्ता इनपुट

नियंत्रित घटक

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

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: ''
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}

उपरोक्त उदाहरण दर्शाता है कि value संपत्ति इनपुट के वर्तमान मूल्य को कैसे परिभाषित करती है और onChange इवेंट हैंडलर उपयोगकर्ता के इनपुट के साथ घटक की स्थिति को अपडेट करता है।

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

अनियंत्रित घटक

अनियंत्रित घटक ऐसे इनपुट होते हैं जिनके पास value संपत्ति नहीं होती है। नियंत्रित घटकों के विपरीत, यह घटक की स्थिति और इनपुट मूल्य को सिंक में रखने के लिए एप्लिकेशन की जिम्मेदारी है।

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: 'John'
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          defaultValue={this.state.name} />
      </div>
    )
  }
}

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