В React неконтролируемые компоненты управляют своим состоянием прямо в DOM, а не через React state. В отличие от контролируемых компонентов, которые используют атрибут value, неконтролируемые компоненты требуют другого подхода для установки начальных значений.
Чтобы задать начальное значение для неконтролируемых компонентов, оставляя последующие изменения под контролем DOM, используй атрибут defaultValue вместо value:
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Имя пользователя:
<input
defaultValue="John"
type="text"
ref={this.input}
/>
</label>
<input type="submit" value="Отправить" />
</form>
);
}
Подход отличается в зависимости от типа элемента:
defaultValuedefaultValuedefaultCheckedГлавное отличие в том, что value переопределяет значения в DOM, заставляя React контролировать компонент. Атрибут defaultValue только устанавливает начальное значение, оставляя управление за DOM в дальнейшем. Это и есть главная характеристика неконтролируемых компонентов.
Использование defaultValue на неконтролируемом компоненте заставляет React переопределять значение DOM при каждом рендере, подобно тому, как работает value на контролируемых компонентах.
Новый — ещё не проверен сообществом
Вы