Создайте контролируемую форму в React

Во-первых, что такое контролируемая форма? Это форма, которая получает свои входные значения из состояния.

Давайте создадим простую форму входа.

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

import React, { useState } from 'react'

В реквизитах компонента получите функцию onSubmit из родительского компонента.

function Login({onSubmit}) {

Затем определите состояния для каждого входа.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

После этого создайте функцию для отправки.

function handleSubmit(e) {
   e.preventDefault() ;
   
   const credentials = {
      email,
      password,
   };
   // Reset credentials to be empty in case they are incorrect
   setEmail("");
   setPassword("");
   // Check that user input is good by sending
   // request to the backend and **authenticating user**
   onSubmit(credentials)
}

И, наконец, используйте состояние в качестве значения входных данных и в событии onChange.

return (
  <div>
    <h1>Login</h1>
      <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email:</label>
    
      <input
        autoFocus
        type="text"
        id="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <label htmlFor="password">Password:</label>
      <input
        type="password"
        id="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <input className="submitButton" type="submit" value="Submit" />
    </form>
  </div>
)

Каждый раз, когда пользователь вводит символ, мы обновляем состояние, вызывая повторную визуализацию ввода, значение/состояние которого изменилось. Это очень важный шаг, потому что в противном случае ввод не будет отражать ни один символ, который вводит пользователь.

Необязательно, добавьте базовый CSS для отображения…

form {
    display: grid;
    gap: .5rem;
    grid-template-columns: auto 1fr;
    max-width: 300px;
    margin: 0 auto;
}
.submitButton {
    grid-column: span 2;
    background: #1f1c32;
    color: white;
}

И это конечный результат:

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

  1. Импортируйте хук состояния.
  2. Объявите состояние для каждого необходимого вам контролируемого компонента.
  3. Используйте состояние в свойствах value и OnChange входных данных.