ค่าเริ่มต้นใน React

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

เพื่อแก้ไขปัญหาดังกล่าว คุณต้องใช้แอตทริบิวต์ defaultValue:

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

สำหรับช่องทำเครื่องหมาย (checkbox) มีแอตทริบิวต์ที่คล้ายกันคือ defaultChecked ซึ่งสามารถใช้เพื่อตั้งค่ารัฐเริ่มต้นได้:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" defaultChecked={checked} />
	</div>;
}

ลองทดลองใช้งานแอตทริบิวต์เหล่านี้ด้วยตนเอง