Формы в ReactJS

Элементы HTML формы работают немного иначе, чем другие элементы DOM в React, потому что элементы формы естественным образом сохраняют некоторое внутреннее состояние. Например, эта форма в обычном HTML допускает одно имя:

1
<form>
2
  <label>
3
    Name:
4
    <input type="text" name="name" />
5
  </label>
6
  <input type="submit" value="Submit" />
7
</form>

Эта форма имеет поведение HTML-формы по умолчанию для просмотра на новой странице, когда пользователь отправляет форму. Если вы хотите, чтобы это было в React, это просто работает. Но в большинстве случаев удобно иметь функцию JavaScript, которая обрабатывает представление формы и имеет доступ к данным, которые пользователь вводил в форму. Стандартный способ достичь этого - технологии под названием «контролируемые компоненты».

Контролируемые компоненты

Элементы HTML формы, такие как , и <select>, как правило, поддерживают собственное состояние и обновляют его на основе ввода пользователем. В React, состояние обычно сохраняется в состоянии свойства компонентов и обновляется только с помощью setState(). Мы можем объединить их, сделав Реагированное состояние «единственным источником истины». Затем компонент React, который отображает форму, также контролирует, то что происходит в этой форме при последующем вводе пользователя. Элемент входной формы, значение которого контролируется React, таким образом, называется «управляемым компонентом». Например, если мы хотим, чтобы предыдущий пример регистрировал имя при его отправке, мы можем написать форму как контролируемый компонент:

1
class NameForm extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {value: ''};
5

6
    this.handleChange = this.handleChange.bind(this);
7
    this.handleSubmit = this.handleSubmit.bind(this);
8
  }
9

10
  handleChange(event) {
11
    this.setState({value: event.target.value});
12
  }
13

14
  handleSubmit(event) {
15
    alert('A name was submitted: ' + this.state.value);
16
    event.preventDefault();
17
  }
18

19
  render() {
20
    return (
21
      <form onSubmit={this.handleSubmit}>
22
        <label>
23
          Name:
24
          <input type="text" value={this.state.value} onChange={this.handleChange} />
25
        </label>
26
        <input type="submit" value="Submit" />
27
      </form>
28
    );
29
  }
30
}

Поскольку атрибут value установлен в нашем элементе формы, отображаемое значение всегда будет this.state.value, что делает React state источником истины. Поскольку handleChange работает при каждом нажатии клавиши, чтобы обновить состояние React, отображаемое значение будет обновляться по мере ввода пользователем. С управляемым компонентом каждая мутация состояния будет иметь связанную функцию обработчика. Это упрощает изменение или проверку ввода пользователя. Например, если мы хотим, чтобы эти имена записывались со всеми заглавными буквами, мы могли бы написать handleChange как:

1
handleChange(event) {
2
  this.setState({value: event.target.value.toUpperCase()});
3
}

textarea тег

В HTML, элемент определяет его текст своими дочерними элементами:

1
<textarea>
2
  Hello there, this is some text in a text area
3
</textarea>

В React использует атрибут value. Таким образом, форма с использованием <textarea> может быть написана очень похоже на форму, использующую однострочный ввод:

1
class EssayForm extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      value: 'Please write an essay about your favorite DOM element.'
6
    };
7

8
    this.handleChange = this.handleChange.bind(this);
9
    this.handleSubmit = this.handleSubmit.bind(this);
10
  }
11

12
  handleChange(event) {
13
    this.setState({value: event.target.value});
14
  }
15

16
  handleSubmit(event) {
17
    alert('An essay was submitted: ' + this.state.value);
18
    event.preventDefault();
19
  }
20

21
  render() {
22
    return (
23
      <form onSubmit={this.handleSubmit}>
24
        <label>
25
          Name:
26
          <textarea value={this.state.value} onChange={this.handleChange} />
27
        </label>
28
        <input type="submit" value="Submit" />
29
      </form>
30
    );
31
  }
32
}

Обратите внимание, что this.state.value инициализируется в конструкторе, так что текстовая область начинается с некоторого текста в нем.

select тег

В HTML создает раскрывающийся список. Например, этот HTML создает раскрывающийся список вкусов: 1<select>2 <option value="grapefruit">Grapefruit</option>3 <option value="lime">Lime</option>4 <option selected value="coconut">Coconut</option>5 <option value="mango">Mango</option>6</select> Обратите внимание, что параметр Coconut изначально выбран как атрибут по умолчанию. Вместо использования этого выбранного атрибута, используется атрибут value в теге root select. Это более удобно в управляемом компоненте, потому что вам нужно только обновить его в одном месте. Например: 1class FlavorForm extends React.Component {2 constructor(props) {3 super(props);4 this.state = {value: 'coconut'};5 6 this.handleChange = this.handleChange.bind(this);7 this.handleSubmit = this.handleSubmit.bind(this);8 }9 10 handleChange(event) {11 this.setState({value: event.target.value});12 }13 14 handleSubmit(event) {15 alert('Your favorite flavor is: ' + this.state.value);16 event.preventDefault();17 }18 19 render() {20 return (21 <form onSubmit={this.handleSubmit}>22 <label>23 Pick your favorite La Croix flavor:24 <select value={this.state.value} onChange={this.handleChange}>25 <option value="grapefruit">Grapefruit</option>26 <option value="lime">Lime</option>27 <option value="coconut">Coconut</option>28 <option value="mango">Mango</option>29 </select>30 </label>31 <input type="submit" value="Submit" />32 </form>33 );34 }35} В целом,  , и <select> все работают очень похоже - все они принимают атрибут value, который можно использовать для реализации управляемого компонента.

Note

Вы можете передать массив в атрибут value, позволяя выбрать несколько опций в теге select:

1
<select multiple={true} value={['B', 'C']}>

Обработка нескольких полей

Когда вам нужно обрабатывать несколько управляемых элементов ввода, вы можете добавить атрибут имени к каждому элементу и позволить функции обработчика выбрать, что делать, исходя из значения event.target.name. Например:

1
class Reservation extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      isGoing: true,
6
      numberOfGuests: 2
7
    };
8

9
    this.handleInputChange = this.handleInputChange.bind(this);
10
  }
11

12
  handleInputChange(event) {
13
    const target = event.target;
14
    const value = target.type === 'checkbox' ? target.checked : target.value;
15
    const name = target.name;
16

17
    this.setState({
18
      [name]: value
19
    });
20
  }
21

22
  render() {
23
    return (
24
      <form>
25
        <label>
26
          Is going:
27
          <input
28
            name="isGoing"
29
            type="checkbox"
30
            checked={this.state.isGoing}
31
            onChange={this.handleInputChange} />
32
        </label>
33
        <br />
34
        <label>
35
          Number of guests:
36
          <input
37
            name="numberOfGuests"
38
            type="number"
39
            value={this.state.numberOfGuests}
40
            onChange={this.handleInputChange} />
41
        </label>
42
      </form>
43
    );
44
  }
45
}

Обратите внимание, как мы использовали синтаксис ES6 для обновления ключа состояния, соответствующего данному имени ввода:

1
this.setState({
2
  [name]: value
3
});

Это эквивалентно этому ES5-коду:

1
var partialState = {};
2
partialState[name] = value;
3
this.setState(partialState);

Кроме того, поскольку setState () автоматически объединяет частичное состояние в текущее состояние, нам нужно было только вызвать его с измененными частями.

Контролируемое входное значение Null

Указание поддержки значения на управляемом компоненте не позволяет пользователю изменять ввод, если вы этого не хотите. Если вы указали значение, но ввод все еще доступен для редактирования, возможно, вы случайно установили значение неопределенным или null. Следующий код демонстрирует это. (Сначала ввод заблокирован, но становится доступным после короткой задержки.)

1
ReactDOM.render(<input value="hi" />, mountNode);
2

3
setTimeout(function() {
4
  ReactDOM.render(<input value={null} />, mountNode);
5
}, 1000);

Альтернативы контролируемым компонентам

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