Неконтрольовані компоненти в React

React. Просунуті керівництва. Частина Четверта
Продовження серії перекладів розділу "Просунуті керівництва" (Advanced Guides) офіційній документації бібліотеки React.js.
Неконтрольовані компоненти в React
У більшості випадків, ми рекомендуємо використовувати контрольовані компоненти для реалізації форм. У контрольованому компоненті, дані форми обробляються компонентом React. Є альтернативний варіант — це неконтрольовані компоненти, в яких дані форми обробляються самим DOM.

При написанні некотролируемого компонента, замість того, щоб писати обробник подій для кожного оновлення стану, ви можете використовувати ref для отримання значень форми з DOM.
Наприклад, наступний код приймає значення Імені з форми у неконтрольованому компоненті:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
alert('A name was submitted:' + this.input.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

Оскільки в неконтрольованому компоненті зберігання актуальних даних відбувається в DOM — використання таких компонентів іноді дозволяє простіше інтегрувати (сполучати) React і не-React код. Якщо вас цікавить менший обсяг коду (і слідчо швидкість його написання) на шкоду чистоти коду — це варіант. В іншому випадку, краще використовувати контрольовані компоненти.
Значення за замовчуванням
У життєвому циклі представлення (візуалізації) React, атрибут
value
в елементах форми буде змінити значення в DOM. В неконтрольованих компонентах, у вас часто буде виникати необхідність у завданні початкових значень, при цьому залишаючи подальші оновлення неконтрольованими. У цьому випадку, ви можете задати атрибут
defaultValue
замість
value
.
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}

Крім того,
<input type="checkbox">
та
<input type="галичина">
підтримують атрибут
defaultChecked
, а
<select>
підтримує
defaultValue
.
Попередні частини:
Джерело: React — Advanced Guides — Uncontrolled Components
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.