Иногда может потребоваться сделать так, чтобы по умолчанию в инпуте уже было какое-то значение. При этом нужно, чтобы из стейта было взято только начальное значение инпута, а сам инпут не был бы привязан к этому стейту.
Для решения такой задачи нужно воспользоваться
атрибутом defaultValue:
function App() {
const [value, setValue] = useState('text');
return <div>
<input defaultValue={value} />
</div>;
}
Для чекбоксов существует аналогичный атрибут
defaultChecked, с помощью которого
можно задать начальное:
function App() {
const [checked, setChecked] = useState(true);
return <div>
<input type="checkbox" defaultChecked={checked} />
</div>;
}
Самостоятельно опробуйте работу данных атрибутов.