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

Привет ребята,

Это мой первый блог в области разработки программного обеспечения. Сегодня я расскажу, как мы можем создать форму в react js.

Давай Гуооо.....

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

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

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

Теперь вы будете думать о том, как будет выглядеть обработка формы в React. Обработка форм — это то, как вы обрабатываете данные, когда они изменяют значение или отправляются. Обычно в HTML данные формы обычно обрабатываются DOM. Но в React данные формы обычно обрабатываются компонентами. То есть, когда данные обрабатываются компонентами, все данные сохраняются в состоянии компонента. Изменения можно контролировать, добавляя обработчики событий в атрибут onChange.

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

Вот минимальный пример кода:

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'));

Теперь вы можете подумать, как вы можете обрабатывать отправляющую часть формы. Вы можете сделать это, добавив обработчик событий в атрибут onSubmit для <form>.

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.name и 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.

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

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

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

Вот пример кода:

import { useState } from "react";
import ReactDOM from "react-dom";
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>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Спасибо за чтение, я чертовски уверен, что теперь вы можете получить некоторые знания из этой статьи.

До скорой встречи с новой статьей.

‹h1›Удачного кодирования! ‹/h1›

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

Вопросы по теме