формы

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

<form>
  <label>
    Name:
    <input type="text" name="name" />
  
  <input type="submit" value="Submit" />
</form>

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

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

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно поддерживают свое собственное состояние и обновляют его на основе пользовательского ввода. В React изменяемое состояние обычно хранится в свойстве state компонентов и обновляется только с помощью setState ().

Мы можем объединить их, сделав состояние Реакта «единственным источником истины». Затем компонент React, который отображает форму, также управляет тем, что происходит в этой форме при последующем вводе пользователем. Элемент формы ввода, значение которого контролируется React таким образом, называется «контролируемым компонентом»

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

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
       <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

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

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

Тег textarea

В HTML элемент <textarea> определяет свой текст своими дочерними элементами:

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

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

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

Выбранный тег

В HTML <select> создает раскрывающийся список. Например, этот HTML создает раскрывающийся список вариантов:

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

Обратите внимание, что опция Coconut изначально выбрана из-за выбранного атрибута. Реагируйте, вместо того, чтобы использовать этот выбранный атрибут, использует атрибут значения в корневом теге выбора. Это более удобно в контролируемом компоненте, потому что вам нужно обновить его только в одном месте. Например:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

В целом, это делает так, что <input type = "text">, <textarea> и <select> работают очень схожим образом - все они принимают атрибут value, который вы можете использовать для реализации управляемого компонента.

Заметка

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

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

Тег ввода файла

В HTML <input type = "file"> позволяет пользователю выбрать один или несколько файлов из хранилища своего устройства для загрузки на сервер или манипулирования с помощью JavaScript через File API.

<input type="file" />

Поскольку его значение доступно только для чтения, это неконтролируемый компонент в React.

Обработка нескольких входов

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

Например:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }
  handleInputChange(event) {
    const target = event.target;
    const value = target.type ==='checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }
  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

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

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

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

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

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

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

Задание значения prop для управляемого компонента не позволяет пользователю изменять ввод, если вы этого не хотите. Если вы указали значение, но ввод по-прежнему доступен для редактирования, возможно, вы случайно установили значение undefined или null.

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

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