Реагировать Учебник

Реагировать Главная Реагировать Введение Реагировать Начать Реагировать ES6 Реагировать на визуализацию HTML Реагировать JSX Реагировать Компоненты Реагировать на класс Реагировать на реквизиты Реагировать на события Реагировать на условия Реагировать списки Реагировать на формы Реактивный маршрутизатор Реагировать на заметку Реагировать на стили CSS Реагировать на стиль Sass

Реагировать на крючки

Что такое крючок? использование состояния использованиеЭффект использованиеконтекста useRef использованиередьюсер использоватьОбратный звонок useMemo Пользовательские крючки

Упражнения по реагированию

Ответная викторина Упражнения по реагированию Сертификат реакции

Реагировать на формы


Как и в HTML, React использует формы, позволяющие пользователям взаимодействовать с веб-страницей.


Добавление форм в React

Вы добавляете форму с помощью React, как и любой другой элемент:

Пример:

Добавьте форму, позволяющую пользователям вводить свое имя:

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Это будет работать как обычно, форма будет отправлена, и страница обновится.

Но, как правило, это не то, чего мы хотим в React.

Мы хотим предотвратить это поведение по умолчанию и позволить React управлять формой.


Обработка форм

Обработка форм — это то, как вы обрабатываете данные, когда они изменяют значение или отправляются.

В HTML данные формы обычно обрабатываются DOM.

В React данные формы обычно обрабатываются компонентами.

Когда данные обрабатываются компонентами, все данные сохраняются в состоянии компонента.

Вы можете контролировать изменения, добавляя обработчики событий в onChangeатрибут.

Мы можем использовать useStateхук, чтобы отслеживать каждое входное значение и предоставлять «единый источник правды» для всего приложения.

Дополнительную информацию о хуках см. в разделе React Hooks.

Пример:

Используйте onChangeхук для управления вводом:

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));


w3schools CERTIFIED . 2022

Получите сертификат!

Завершите модули React, выполните упражнения, сдайте экзамен и получите сертификат w3schools!!

ЗАПИСАТЬСЯ НА 95 $

Отправка форм

Вы можете управлять действием отправки, добавив обработчик событий в onSubmitатрибут для <form>:

Пример:

Добавьте кнопку отправки и обработчик события в onSubmitатрибуте:

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));


Несколько полей ввода

Вы можете управлять значениями более чем одного поля ввода, добавляя nameатрибут к каждому элементу.

Мы инициализируем наше состояние пустым объектом.

Для доступа к полям в обработчике событий используйте синтаксис event.target.nameand .event.target.value

Чтобы обновить состояние, используйте квадратные скобки [обозначение скобок] вокруг имени свойства.

Пример:

Напишите форму с двумя полями ввода:

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

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


Текстовое поле

Элемент textarea в React немного отличается от обычного HTML.

В HTML значением textarea был текст между начальным <textarea> и конечным тегами </textarea>.

<textarea>
  Content of the textarea.
</textarea>

В React значение textarea помещается в атрибут value. Мы будем использовать useStateхук для управления значением textarea:

Пример:

Простое текстовое поле с некоторым содержимым:

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [textarea, setTextarea] = useState(
    "The content of a textarea goes in the value attribute"
  );

  const handleChange = (event) => {
    setTextarea(event.target.value)
  }

  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));


Выбирать

Выпадающий список или поле выбора в React также немного отличается от HTML.

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

HTML:

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

В React выбранное значение определяется value атрибутом selectтега:

Пример:

Простое поле выбора, где выбранное значение «Вольво» инициализируется в конструкторе:

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}


Внеся эти небольшие изменения в <textarea>и <select>, React сможет одинаково обрабатывать все элементы ввода.