Как построить динамические формы в React

kak postroit dinamicheskie formy v react

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

Итак, начнём.

Как создать форму в React

Давайте сначала создадим простую форму. Синтаксис прост:

import './App.css';

function App() {
  return (
    <div className="App">
      <form>
        <div>
          <input
            name="name"
            placeholder="Name"
          />
          <input
            name="age"
            placeholder="Age"
          />
        </div>
      </form>
    </div>
  );
}

export default App;

Вот как это будет выглядеть:

Скриншот-2022-02-06-171620

У нас есть два поля ввода: Имя и Возраст. Но эти поля статические. Итак, давайте сделаем их динамичными с помощью React States.

Как сделать формы динамичными в React

Создайте одно состояние под названием InputFields. В нем будет объект, с имя и возраст свойства.

const [inputFields, setInputFields] = useState([
    {name: '', age: ''}
])

Теперь давайте сопоставим наши поля формы с их inputFields государство.

import { useState } from 'react';
import './App.css';

function App() {
  const [inputFields, setInputFields] = useState([
    { name: '', age: '' }
  ])
  return (
    <div className="App">
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name="name"
                placeholder="Name"
              />
              <input
                name="age"
                placeholder="Age"
              />
            </div>
          )
        })}
      </form>
    </div>
  );
}

export default App;

Теперь мы увидим только один набор полей ввода, потому что у нас есть только один объект inputFields государство. Если мы добавим больше объектов, мы увидим несколько полей ввода.

добавить значение из состояния inputFields

Теперь давайте добавим значение из inputFields состояния к полям ввода.

import { useState } from 'react';
import './App.css';

function App() {
  const [inputFields, setInputFields] = useState([
    { name: '', age: '' }
  ])
  return (
    <div className="App">
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name="name"
                placeholder="Name"
                value={input.name}
              />
              <input
                name="age"
                placeholder="Age"
                value={input.age}
              />
            </div>
          )
        })}
      </form>
    </div>
  );
}

export default App;

Значения будут input.name и input.age.

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

Создайте функцию под названием handleFormChange.

const handleFormChange = () => {
    
}

Назначьте эту функцию полям ввода как событие onChange.

<div key={index}>
              <input
                name="name"
                placeholder="Name"
                value={input.name}
                onChange={event => handleFormChange(index, event)}
              />
              <input
                name="age"
                placeholder="Age"
                value={input.age}
                onChange={event => handleFormChange(index, event)}
              />
            </div>

Это событие onChange принимает два параметра, индекс и событие. Индекс – это индекс массива, а событие – это данные, которые мы вводим в поле ввода. Мы передаем их в handleFormChange функция.

const handleFormChange = (index, event) => {
    
}

Но дело в том, что если мы попытаемся что-нибудь ввести в поля ввода, мы этого не сможем. Потому что мы не установили штаты в formFields государство. Итак, давайте это сделаем.

 const handleFormChange = (index, event) => {
    let data = [...inputFields];
 }

Сохраняем наши inputFields состояние в переменную под названием данные с помощью оператора распространения (три точки ...).

Затем мы будем ориентироваться на индекс переменной данных с помощью параметра index, а также на название свойства.

const handleFormChange = (index, event) => {
    let data = [...inputFields];
    data[index][event.target.name] = event.target.value;
}

Например, предположим, что мы вводим в поле ввода с помощью индекс 0. Итак, мы указываем индекс в данных и имя свойства, используя event.target.name. И внутри этого индекса данных мы сохраняем значение с полей ввода с помощью event.target.value.

Теперь нам нужно сохранить эти данные обратно внутри inputFields массив с помощью setInputFields метод.

const handleFormChange = (index, event) => {
   let data = [...inputFields];
   data[index][event.target.name] = event.target.value;
   setInputFields(data);
}

Теперь, если мы что-нибудь введем в поля ввода, это появится в полях ввода.

Как добавить больше полей формы

Давайте создадим кнопку, чтобы добавить больше полей формы.

<button>Add More..</button>

А также функция, запускаемая при нажатии этой кнопки.

const addFields = () => {
    
}

Давайте добавим функцию к кнопке посредством события onClick.

<button onClick={addFields}>Add More..</button>

Теперь в функции addFields необходимо создать объект. И всякий раз, когда мы нажимаем кнопку, она будет нажиматься на inputFields состояния, создавая таким образом новое поле ввода.

const addFields = () => {
    let newfield = { name: '', age: '' }
}

Затем установите это новое поле внутри inputFields государство.

const addFields = () => {
    let newfield = { name: '', age: '' }

    setInputFields([...inputFields, newfield])
}

Здесь мы также устанавливаем существующее inputFields с помощью оператора распространения в сочетании с newfield.

Если нажать кнопку Добавить поле сейчас, будет создано новое поле ввода.

Скриншот-2022-02-06-174542

Как создать кнопку «Отправить».

Давайте создадим кнопку «Отправить» и одну функцию, чтобы увидеть наши данные при отправке формы.

<button>Submit</button>

Нам также нужна функция, которая будет запускаться при нажатии этой кнопки. Он зарегистрирует данные в консоли с полей ввода. Он также имеет метод под названием e.preventDefault() это не позволит обновить страницу.

const submit = (e) => {
    e.preventDefault();
    console.log(inputFields)
}

Добавьте эту функцию к кнопке Отправить:

<button onClick={submit}>Submit</button>

А также в теге формы:

<form onSubmit={submit}>

Если мы представим, мы увидим наши данные на консоли:

Скриншот-2022-02-06-175919

Удалить поля с помощью кнопки «Удалить».

Теперь давайте создадим кнопку для удаления этих полей, если они нам не нужны.

<form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                name="name"
                placeholder="Name"
                value={input.name}
                onChange={event => handleFormChange(index, event)}
              />
              <input
                name="age"
                placeholder="Age"
                value={input.age}
                onChange={event => handleFormChange(index, event)}
              />
              <button>Remove</button>
            </div>
          )
        })}
      </form>
Скриншот-2022-02-06-174720

Нам тоже нужна функция.

const removeFields = () => {

}

Итак, назначьте эту функцию кнопке Удалить.

<button onClick={() => removeFields(index)}>Remove</button>

Мы передаем индекс как параметр, являющийся индексом полей ввода.

Затем получите этот индекс в функции.

const removeFields = (index) => {
  
}

И по-прежнему нам нужно создать новую переменную и сохранить inputFields состояние в этой новой переменной.

const removeFields = (index) => {
    let data = [...inputFields];
}

Затем нам нужно соединить эту переменную данных с индексом. Затем нам нужно хранить его в inputFields состояния с помощью setInputFields.

const removeFields = (index) => {
    let data = [...inputFields];
    data.splice(index, 1)
    setInputFields(data)
}

Теперь, если мы нажмем «Удалить», это поле будет удалено.

Скриншот-2022-02-06-175415

Итак, у нас есть пять полей ввода с пятью разными именами. Давайте удалим ввод Nishant.

Скриншот-2022-02-06-180336

Вы видите, что его удалили. И если мы представим, мы увидим наши обновленные данные на консоли.

Скриншот-2022-02-06-180434

Подведению

Теперь вы знаете, как создавать динамические формы в React. Поздравляю!

Вы также можете посмотреть мое видео по теме Тема Динамические формы — Как добавить динамические формы в React.

Попробуйте код здесь – https://github.com/nishant-666/Dynamic-Forms.

Счастливого обучения 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.