उपयोगकर्ताओं को प्रतिक्रिया दें, यहां पूर्णता के लिए एक उत्तर दिया गया है।
प्रतिक्रिया संस्करण 16.4.2
आप या तो प्रत्येक कीस्ट्रोक के लिए अपडेट करना चाहते हैं, या केवल सबमिट पर मूल्य प्राप्त करना चाहते हैं। घटक कार्यों में प्रमुख घटनाओं को जोड़ना, लेकिन आधिकारिक डॉक्स में अनुशंसित विकल्प हैं।
नियंत्रित बनाम अनियंत्रित घटक
को नियंत्रित
से डॉक्स - फार्म और नियंत्रित घटकों :
HTML में, इनपुट, टेक्सारिया जैसे तत्वों का चयन करें और आमतौर पर अपनी स्थिति बनाए रखें और उपयोगकर्ता इनपुट के आधार पर इसे अपडेट करें। प्रतिक्रिया में, उत्परिवर्तनीय स्थिति को आमतौर पर घटकों की राज्य संपत्ति में रखा जाता है, और केवल सेटस्टेट () के साथ अद्यतन किया जाता है।
हम रिएक्ट राज्य को "सत्य का एकल स्रोत" बनाकर दोनों को जोड़ सकते हैं। फिर रिएक्ट घटक जो किसी प्रपत्र को प्रस्तुत करता है, यह भी नियंत्रित करता है कि बाद के उपयोगकर्ता इनपुट पर उस रूप में क्या होता है। एक इनपुट फॉर्म एलिमेंट जिसका मान रिएक्ट द्वारा इस तरह से नियंत्रित किया जाता है, उसे "नियंत्रित घटक" कहा जाता है।
यदि आप एक नियंत्रित घटक का उपयोग करते हैं तो आपको मूल्य में हर परिवर्तन के लिए राज्य को अद्यतन रखना होगा। ऐसा होने के लिए, आप किसी ईवेंट हैंडलर को घटक से बाँधते हैं। डॉक्स के उदाहरणों में, आमतौर पर ऑनकेंज इवेंट।
उदाहरण:
1) कंस्ट्रक्टर में बाइंड इवेंट हैंडलर (राज्य में रखा गया मूल्य)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) हैंडलर फंक्शन बनाएं
handleChange(event) {
this.setState({value: event.target.value});
}
3) फॉर्म सबमिट फंक्शन बनाएं (मूल्य राज्य से लिया गया है)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) रेंडर
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
यदि आप नियंत्रित घटकों का उपयोग करते हैं, handleChangeतो उचित स्थिति को अपडेट करने और बनाए रखने के लिए , आपका फ़ंक्शन हमेशा निकाल दिया जाएगा। राज्य में हमेशा अद्यतन मूल्य होगा, और जब फॉर्म जमा किया जाता है, तो मूल्य राज्य से लिया जाएगा। यदि आपका फॉर्म बहुत लंबा है, तो यह एक कॉन हो सकता है, क्योंकि आपको हर कंपोनेंट के लिए एक फंक्शन बनाना होगा, या एक साधारण लिखना होगा जो हर कंपोनेंट के वैल्यू में बदलाव को हैंडल करेगा।
अनियंत्रित
से डॉक्स - अनियंत्रित घटक
ज्यादातर मामलों में, हम रूपों को लागू करने के लिए नियंत्रित घटकों का उपयोग करने की सलाह देते हैं। एक नियंत्रित घटक में, प्रपत्र डेटा एक प्रतिक्रिया घटक द्वारा नियंत्रित किया जाता है। विकल्प अनियंत्रित घटक है, जहां फॉर्म डेटा डोम द्वारा ही संभाला जाता है।
एक अनियंत्रित घटक लिखने के लिए, हर राज्य के अपडेट के लिए एक इवेंट हैंडलर लिखने के बजाय, आप DOM से फॉर्म वैल्यू प्राप्त करने के लिए रेफरी का उपयोग कर सकते हैं।
यहां मुख्य अंतर यह है कि आप onChangeफ़ंक्शन का उपयोग नहीं करते हैं, बल्कि onSubmitमूल्यों को प्राप्त करने के लिए फ़ॉर्म का उपयोग करते हैं, और यदि आवश्यक हो तो मान्य करें।
उदाहरण:
1) इवेंट हैंडलर को बांधें और कंस्ट्रक्टर में इनपुट के लिए रेफरी बनाएं (राज्य में कोई मूल्य नहीं रखा गया है)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) फॉर्म सबमिट फंक्शन बनाएं (मूल्य DOM कंपोनेंट से लिया गया है)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) रेंडर
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
यदि आप अनियंत्रित घटकों का उपयोग करते हैं, तो handleChangeफ़ंक्शन को बांधने की कोई आवश्यकता नहीं है । जब फॉर्म जमा किया जाता है, तो मूल्य डीओएम से लिया जाएगा और इस बिंदु पर neccessary सत्यापन हो सकता है। किसी भी इनपुट घटक के लिए किसी भी हैंडलर फ़ंक्शन को बनाने की आवश्यकता नहीं है।
आपका मुद्दा
अब, अपने मुद्दे के लिए:
... मैं चाहता हूं कि मुझे बुलाया जाए जब मैं पुश करता हूं 'एंटर करें जब पूरा नंबर दर्ज किया गया हो
यदि आप इसे प्राप्त करना चाहते हैं, तो एक अनियंत्रित घटक का उपयोग करें। यदि आवश्यक न हो, तो ऑनचेंज हैंडलर न बनाएं। enterकुंजी प्रपत्र प्रस्तुत करेगा और handleSubmitसमारोह सक्रिय किए जाएंगे।
परिवर्तन आपको करने की आवश्यकता है:
अपने तत्व में onChange कॉल निकालें
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
// onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
फॉर्म सबमिट करें और अपने इनपुट को मान्य करें। आपको फॉर्म सबमिट फ़ंक्शन में अपने तत्व से मूल्य प्राप्त करने की आवश्यकता है और फिर मान्य करें। सुनिश्चित करें कि आप कंस्ट्रक्टर में अपने तत्व का संदर्भ बनाते हैं।
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
एक अनियंत्रित घटक का उदाहरण उपयोग:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
onBlurघटना के लिए बाध्य करना चाहेंगे ।