React
प्रतिक्रिया स्वरूप

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

एक नियंत्रित घटक एक मूल्य के लिए बाध्य है और इसके परिवर्तन ईवेंट आधारित कॉलबैक का उपयोग करके कोड में संभाले जाते हैं।

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

इस उदाहरण में हम एक खाली व्यक्ति ऑब्जेक्ट के साथ राज्य को इनिशियलाइज़ करते हैं। हम फिर व्यक्ति वस्तु के अलग-अलग कुंजी के लिए 2 आदानों के मूल्यों को बांधते हैं। तब उपयोगकर्ता प्रकारों के रूप में, हम प्रत्येक मान को handleChange फ़ंक्शन में handleChange करते हैं। चूंकि घटकों के मूल्य राज्य के लिए बाध्य हैं, इसलिए हम setState() कॉल करके उपयोगकर्ता प्रकारों के रूप में setState() कर सकते हैं।

नोट: नियंत्रित घटकों के साथ काम करते समय setState() कॉल नहीं करना, उपयोगकर्ता को टाइप करने का कारण होगा, लेकिन इनपुट नहीं देखें क्योंकि रिएक्ट केवल तब बदलता है जब ऐसा करने के लिए कहा जाता है।

यह भी ध्यान रखना महत्वपूर्ण है कि इनपुट के नाम व्यक्ति वस्तु में कुंजियों के नाम के समान हैं। यह हमें शब्दकोश रूप में मूल्य को पकड़ने की अनुमति देता है जैसा कि यहां देखा गया है।

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] एक ही person[event.target.name] है person.firstName || person.lastName । बेशक यह इस बात पर निर्भर करेगा कि वर्तमान में कौन सा इनपुट टाइप किया जा रहा है। चूंकि हम नहीं जानते हैं कि उपयोगकर्ता कहाँ टाइप करेगा, एक शब्दकोश का उपयोग करके और इनपुट नामों को कुंजी के नामों से मिलाते हुए, हमें उपयोगकर्ता इनपुट नं। मामला जहां onChange से बुलाया जा रहा है।