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

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

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

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

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

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