การทำงานกับอินพุตใน React

การทำงานกับอินพุตใน React เกิดขึ้นโดยใช้ สเตต สำหรับแต่ละอินพุตจะมีการกำหนดสเตตของตัวเอง ซึ่งมี value ของอินพุตอยู่ภายใน

เรามาดูตัวอย่างกัน สมมติว่าเรามี อินพุต:

function App() {
	return <div>
		<input />
	</div>;
}

สมมติว่าเรามีสเตตด้วย:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

ลองผูกสเตตของเราเข้ากับแอตทริบิวต์ value ของอินพุต:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

ในกรณีนี้ ผลลัพธ์ที่ได้คือ เมื่อสเตตเปลี่ยนแปลง ข้อความในอินพุตก็จะเปลี่ยนไปตามแบบ reactive

อย่างไรก็ตาม สิ่งนี้ให้ผลข้างเคียงที่น่าสนใจ: ตอนนี้เมื่อรันโค้ดในเบราว์เซอร์ ไม่อาจ เปลี่ยนข้อความในอินพุตได้! ทำไม: เพราะ เมื่อป้อนข้อความลงในอินพุต สเตต value ไม่ได้เปลี่ยนแปลง ดังนั้นข้อความ ในอินพุตก็ไม่ควรเปลี่ยนแปลง

ลองทำดูเอง คัดลอกโค้ดของฉันและรัน บนเครื่องของคุณ ลองเปลี่ยนข้อความในอินพุต - คุณจะทำอะไรไม่ได้เลย เปิดคอนโซล เบราว์เซอร์ - คุณจะเห็นคำเตือน จาก React คำเตือนนี้ระบุให้เราเห็น ว่าเราผูกสเตตเข้ากับอินพุต แต่ด้วยเหตุนี้ จึงล็อกอินพุตไว้

มาทำให้สามารถป้อนข้อความ ลงในอินพุตของเราได้ สำหรับสิ่งนี้จำเป็นต้องทำให้ เมื่อมีการป้อนข้อมูล สเตตของเรา จะเปลี่ยนเป็นค่าปัจจุบันของอินพุต

เริ่มแรก สำหรับสิ่งนี้จำเป็นต้องติดตั้งบนอินพุต เหตุการณ์ onChange:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

เหตุการณ์นี้ใน React มีพฤติกรรมต่างออกไป เมื่อเทียบกับ JS ล้วนๆ ใน React มัน ทำงาน ทันทีเมื่ออินพุตเปลี่ยนแปลง นั่นคือ เมื่อป้อนหรือลบอักขระ

ทีนี้มาลองเพิ่มตัวจัดการเหตุการณ์ของเรา:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ในตัวจัดการนี้ เราต้องอ่านข้อความปัจจุบัน ของอินพุตและตั้งค่าให้เป็นสเตตโดยใช้ ฟังก์ชัน setValue

ปัญหาคือ this ของฟังก์ชันนี้ จะไม่ชี้ไปที่อินพุตของเรา - นี่คือ ลักษณะเฉพาะของ React เพื่อให้ได้องค์ประกอบ ที่เกิดเหตุการณ์ขึ้น เราจำเป็นต้อง ใช้ event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // ลิงก์ไปยังองค์ประกอบ DOM ของอินพุต
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ลองแสดงข้อความปัจจุบัน ของอินพุตโดยใช้ event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // ข้อความปัจจุบันของอินพุต
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

และตอนนี้ลองบันทึกข้อความของอินพุตลงในสเตตของเรา:

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

ตอนนี้เราสามารถป้อนข้อความลงในอินพุตได้แล้ว เมื่อ นั้น สเตต value จะมี ข้อความปัจจุบันของอินพุตอยู่เสมอ

เราสามารถตรวจสอบสิ่งนี้ได้ง่ายๆ ลองแสดงเนื้อหาของ ข้อความของเราลงในย่อหน้า ในกรณีนี้เมื่อ ป้อนข้อความลงในอินพุต ข้อความที่ป้อนจะ ปรากฏในย่อหน้าอัตโนมัติ:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>ข้อความ: {value}</p>
	</div>;
}

เราสามารถเขียนใหม่เป็นแบบกระชับมากขึ้น ด้วยฟังก์ชันลูกศรแบบไม่ระบุชื่อ:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>ข้อความ: {value}</p>
	</div>;
}

ดังนั้น สำหรับการทำงานของอินพุตใดๆ เราจำเป็น ต้องมีสิ่งต่อไปนี้: สร้างสเตตสำหรับ อินพุตนี้, ผูกสเตตเข้ากับแอตทริบิวต์ value ของอินพุต, ติดตั้งเหตุการณ์ onChange บนอินพุต, ในตัวจัดการเหตุการณ์ ให้เปลี่ยนสเตตของอินพุต เป็นข้อความของมัน

จำเป็นต้องดำเนินการเหล่านี้กับทุก อินพุต นั่นคือ หากคุณมีสองอินพุต, คุณจะมีสองสเตตและสองฟังก์ชันตัวจัดการ เหตุการณ์ onChange

สร้างอินพุตสองตัว ให้ข้อความของอินพุตแรก แสดงในย่อหน้าแรก และข้อความ ของอินพุตที่สอง - ในย่อหน้าที่สอง