Сегодня я собираюсь разобрать контролируемые и неконтролируемые формы в React и объяснить, почему мы будем их использовать!

(React — это фреймворк для JavaScript. Если вам интересно узнать о нем больше, вы можете просмотреть отличную документацию здесь.)

РАЗНИЦА МЕЖДУ ДВУМЯ

Разница между контролируемой формой и неконтролируемой формой заключается исключительно в том, как мы храним значения внутри входных данных формы. На стороне клиента форма может быть точно такой же, но способ обработки информации совершенно другой. Если вы знакомы с обработкой форм с помощью Vanilla JS, это, по сути, неконтролируемая форма, данные которой хранятся в DOM. Однако в контролируемой форме данные хранятся внутри компонента, внутри его состояния.

Для демонстрации я создал базовое приложение React с формой для создания списка желаний для путешествий (#2020… можно мечтать, правда?). Вот как выглядит базовая форма до того, как мы добавим синтетические события:

НЕКОНТРОЛИРУЕМЫЕ ФОРМЫ

Во-первых, начнем с неконтролируемых форм (вы можете посмотреть документацию по React здесь). Это можно сделать несколькими различными способами, но наиболее распространенным способом является использование ссылок, представляющих собой переменные экземпляра, которые можно использовать во всем компоненте класса. Рефы инициализируются через функцию React.createRef(). Первый шаг — инициализировать ссылки внутри метода конструктора:

constructor() {
   super()
   this.locationInput = React.createRef()
}

После этого назначьте ссылку, которую вы хотите использовать, внутри соответствующего входного тега, например:

<label>Location:</label><br/>
<input type="text" name="location" ref={this.locationInput}></input>

Наконец, создайте функцию, которая обрабатывает отправку формы, и вы можете получить доступ к этому входу ref для управления данными, как вам угодно:

handleSubmit = (event) => {
   event.preventDefault()
   console.log(this.locationInput.current.value)
}

Вот и все! Вот как выглядит весь код:

Это самый простой способ построить форму, но, конечно, есть и недостатки. Самый большой из них, на мой взгляд, заключается в том, что любые проверки могут происходить только после того, как пользователь нажмет кнопку «Отправить», а не во время заполнения формы.

КОНТРОЛИРУЕМЫЕ ФОРМЫ

Теперь давайте перейдем к моей предпочтительной версии форм: контролируемой (в конце концов, я помешан на контроле типа А). Опять же, вы можете узнать больше об управляемых компонентах в очень подробной документации React здесь. Первый шаг — настроить свое состояние для каждого ввода в форме, которой вы хотели бы управлять. В этом примере я снова сосредоточусь на местоположении.

state = {
   location: ""
}

Теперь, когда это состояние настроено, я собираюсь создать функцию handleChange, которая будет принимать любое значение внутри соответствующего ввода и обновлять его до состояния.

handleChange = (event) => {
   this.setState({location: event.target.value})
}

Теперь мы можем вызвать эту функцию внутри ввода Location, используя прослушиватель событий onChange:

<input type="text" name="location" onChange={this.handleChange}> </input>

Теперь мы можем обновить нашу функцию handleSubmit, чтобы получать эти входные значения непосредственно через состояние!

handleSubmit = (event) => {
   event.preventDefault()
   console.log(this.state.location)
}

Не так уж плохо, да? Опять же, вот весь компонент для справки:

ВЫВОД

В конце концов, вам решать, какой способ вы используете… как я упоминал выше, я лично предпочитаю контролируемые формы, потому что они позволяют вам иметь более прямую проверку формы, и это также то, что документация React рекомендует использовать для форм. Надеюсь, это поможет и счастливого кодирования!