ব্যবহারকারীদের প্রতিক্রিয়া জানান, সম্পূর্ণতার জন্য এখানে একটি উত্তর।
সংস্করণ প্রতিক্রিয়া 16.4.2
আপনি হয় প্রতিটি কীস্ট্রোকের জন্য আপডেট করতে চান, বা মান জমা দিতে হবে। উপাদানটিতে মূল ইভেন্টগুলি যুক্ত করা কাজ করে তবে অফিসিয়াল ডক্সে প্রস্তাবিত বিকল্প রয়েছে।
নিয়ন্ত্রিত বনাম অনিয়ন্ত্রিত উপাদান
নিয়ন্ত্রিত
ডক্স থেকে - ফর্ম এবং নিয়ন্ত্রিত উপাদানগুলি :
এইচটিএমএলে, ইনপুট, টেক্সারিয়ার মতো উপাদান তৈরি করুন এবং সাধারণত তাদের নিজস্ব রাজ্য বজায় রাখুন এবং ব্যবহারকারীর ইনপুটের ভিত্তিতে আপডেট করুন। প্রতিক্রিয়া হিসাবে, পরিবর্তনীয় স্থিতি সাধারণত উপাদানগুলির রাজ্যের সম্পত্তিতে রাখা হয় এবং কেবল সেটস্টেট () দ্বারা আপডেট হয়।
প্রতিক্রিয়া রাষ্ট্রটিকে "সত্যের একক উত্স" হিসাবে তৈরি করে আমরা দুটোকে একত্রিত করতে পারি। তারপরে প্রতিক্রিয়াযুক্ত উপাদান যা কোনও ফর্ম রেন্ডার করে তা পরবর্তী ব্যবহারকারী ইনপুটতে সেই ফর্মটিতে কী ঘটে তাও নিয়ন্ত্রণ করে। একটি ইনপুট ফর্ম উপাদান যার মান এইভাবে প্রতিক্রিয়া দ্বারা নিয়ন্ত্রিত হয় তাকে "নিয়ন্ত্রিত উপাদান" বলা হয়।
আপনি যদি একটি নিয়ন্ত্রিত উপাদান ব্যবহার করেন তবে আপনাকে মানকে প্রতিটি পরিবর্তনের জন্য রাষ্ট্র আপডেট রাখতে হবে। এটি হওয়ার জন্য, আপনি একটি ইভেন্ট হ্যান্ডলারটিকে উপাদানটির সাথে আবদ্ধ করেন। দস্তাবেজের উদাহরণগুলিতে, সাধারণত অন চেঞ্জ ইভেন্ট।
উদাহরণ:
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তবে সঠিক স্থিতি আপডেট করতে এবং রাখার জন্য আপনার ফাংশনটি সর্বদা বরখাস্ত করা হবে। রাজ্যের সর্বদা আপডেট হওয়া মান থাকবে এবং ফর্মটি জমা দেওয়ার পরে, মানটি রাজ্য থেকে নেওয়া হবে। আপনার ফর্মটি খুব দীর্ঘ হলে এটি একটি কন হতে পারে, কারণ আপনাকে প্রতিটি উপাদানগুলির জন্য একটি ফাংশন তৈরি করতে হবে, বা এমন একটি সাধারণ লিখতে হবে যা প্রতিটি উপাদানটির মান পরিবর্তন করে।
অবশ
দস্তাবেজ থেকে - অনিয়ন্ত্রিত উপাদান
বেশিরভাগ ক্ষেত্রে, আমরা ফর্মগুলি প্রয়োগ করতে নিয়ন্ত্রিত উপাদানগুলি ব্যবহার করার পরামর্শ দিই। একটি নিয়ন্ত্রিত উপাদানগুলিতে, ফর্ম ডেটা একটি প্রতিক্রিয়া উপাদান দ্বারা পরিচালিত হয়। বিকল্পটি অনিয়ন্ত্রিত উপাদান, যেখানে ফর্ম ডেটা নিজেই ডিওএম দ্বারা পরিচালিত হয়।
একটি অনিয়ন্ত্রিত উপাদান লিখতে, প্রতিটি রাজ্যের আপডেটের জন্য ইভেন্ট হ্যান্ডলার লেখার পরিবর্তে, আপনি ডিওএম থেকে ফর্মের মান পেতে একটি রেফ ব্যবহার করতে পারেন।
এখানে মূল পার্থক্যটি হ'ল আপনি 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ফাংশন বাঁধতে হবে না। ফর্মটি জমা দেওয়া হলে, মানটি ডিওএম থেকে নেওয়া হবে এবং প্রয়োজনীয় বৈধতা এই মুহুর্তে ঘটতে পারে। ইনপুট উপাদানগুলির জন্য কোনও হ্যান্ডলার ফাংশন তৈরি করার দরকার নেই।
আপনার সমস্যা
এখন, আপনার ইস্যুর জন্য:
... আমি যখন পুরো নম্বরটি প্রবেশ করানো হয় তখন 'এন্টার' চাপলে এটিকে ডাকতে চাই
আপনি যদি এটি অর্জন করতে চান তবে একটি অনিয়ন্ত্রিত উপাদান ব্যবহার করুন। এটি প্রয়োজন না হলে অন চেঞ্জ হ্যান্ডলারগুলি তৈরি করবেন না। enterকী ফর্ম জমা করবে এবং handleSubmitফাংশন বহিস্কার করা হবে না।
আপনার যে পরিবর্তনগুলি করতে হবে:
আপনার এলিমেন্টে অন চেঞ্জ কলটি সরিয়ে ফেলুন
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ইভেন্টটির বৈধতা প্রক্রিয়াটিও আবদ্ধ করতে চান ।