Неконтролируемые компоненты — это React-компоненты, которые управляют собственным внутренним состоянием, вместо того чтобы React контролировал их состояние. Само DOM хранит текущее значение компонента, к которому ты получаешь доступ через ref когда это нужно.
Чтобы получить текущее значение неконтролируемого компонента, ты используешь React.createRef() для создания ссылки и затем получаешь значение через ref.current.value.
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Неконтролируемые компоненты реже рекомендуются для реализации форм. Контролируемые компоненты обычно предпочтительнее, потому что React управляет всеми данными формы, что обеспечивает лучшую предсказуемость и удобную интеграцию с управлением состоянием React. Используй неконтролируемые компоненты только когда интегрируешь сторонний код без React или когда форма достаточно простая.
В неконтролируемых компонентах React state используется для хранения и управления всеми значениями форм, в то время как в контролируемых компонентах значения хранятся в DOM.
Новый — ещё не проверен сообществом
Вы