React में textarea के साथ काम करना

आइए अब बहु-पंक्ति इनपुट फ़ील्ड textarea के साथ काम करना सीखें। React में, सुविधा के लिए, इसके साथ काम करना टेक्स्ट इनपुट के साथ काम करने के समान बनाया गया है। सादे JS के विपरीत, React में textarea में क्लोजिंग टैग की आवश्यकता नहीं होती है, और इसका टेक्स्ट value एट्रिब्यूट में रखा जाना चाहिए।

उदाहरण देखें:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<textarea value={value} onChange={handleChange} />
		<p>{value}</p>
	</div>;
}

संक्षिप्त रूप में:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<textarea value={value} onChange={event => setValue(event.target.value)} />
		<p>{value}</p>
	</div>;
}

मान लीजिए कि textarea में टेक्स्ट दर्ज किया जाता है। ऐसा करें कि पैराग्राफ में दर्ज किए गए टेक्स्ट का ट्रांसलिट आउटपुट हो।

मान लीजिए कि textarea में प्रत्येक पंक्ति पर नंबर दर्ज किए जाते हैं। ऐसा करें कि जैसे-जैसे इनपुट होता है, पैराग्राफ में दर्ज किए गए नंबरों का योग आउटपुट हो।