Reactにおけるデフォルト値

場合によっては、入力欄に最初から何らかの値が表示されているようにしたいことがあります。その際、ステートからは初期値のみを取得し、入力欄自体がそのステートに束縛されないようにする必要があります。

このような課題を解決するには、defaultValue 属性を使用します：

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

チェックボックスには同様の属性 defaultChecked があり、これを使って初期状態を設定できます：

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