Oletusarvot Reactissa

Joskus voi olla tarpeen, että input-kentässä on jo jotakin arvoa oletuksena. Samaan aikaan on kuitenkin vaatimus, että vain input-kentän alkuarvo otetaan tilasta, eikä input-kenttä itse olisi sidottu tähän tilaan.

Tällaisen ongelman ratkaisemiseksi on hyödynnettävä defaultValue-attribuuttia:

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

Valintaruuduille on olemassa vastaava attribuutti defaultChecked, jonka avulla voidaan asettaa alkuarvo:

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