प्रतिक्रिया में नियंत्रित और अनियंत्रित घटकों को जटिल नहीं होना चाहिए

अप्रबंधित घटक

class Form extends Component {
  render() {
    return (
      <div>
        <input type="text" />
      </div>
    );
  }
}

class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
    // do something with `name`
  }
  render() {
    return (
      <div>
        <input type="text" ref={input => this._name = input} />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

प्रबंधित घटक:

<input value={someValue} onChange={handleChange} />

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
      </div>
    );
  }
}

• यह सब एक खाली रेखा से शुरू होता है - '';
• आप 'a' अक्षर दर्ज करते हैं और handleNameChange इसे प्राप्त करता है और setState को कॉल करता है। तब इनपुट फॉर्म को फिर से 'a' मान के साथ प्रदान किया जाता है;
• आप 'b' अक्षर दर्ज करते हैं और handleNameChange मूल्य 'ab' प्राप्त करता है और इसे राज्य में सेट करता है। Opet इनपुट फॉर्म प्रदान किया गया है, लेकिन अब 'ab' मान के साथ।

• त्वरित प्रतिक्रिया, जैसे कि सत्यापन;
• सभी फॉर्म फ़ील्ड मान्य होने तक एक विशिष्ट बटन को अक्षम करें;
• क्रेडिट कार्ड नंबर जैसे कुछ इनपुट फ़ील्ड स्वरूपों के प्रसंस्करण को सक्षम करना।

क्या एक घटक "प्रबंधनीय" बनाता है?

<input type="text" />

<input type="checkbox" />

<input type="radio" />

<textarea />

<select />

जाँच - परिणाम