import React, { useState } from ‘react’;

function Form() {
  const [firstName, setFirstName] = useState(‘’);
  const [lastName, setLastName] = useState(‘’);
  const [gender, setGender] = useState(‘’);
  const [dateOfBirth, setDateOfBirth] = useState(‘’);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Обработка данных формы
    console.log(‘Отправленная форма:’, { firstName, lastName, gender, dateOfBirth });
    // Сброс значений полей формы
    setFirstName(‘’);
    setLastName(‘’);
    setGender(‘’);
    setDateOfBirth(‘’);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Имя:
          <input type=“text” value={firstName} onChange={(e) => setFirstName(e.target.value)} />
        </label>
      </div>
      <div>
        <label>
          Фамилия:
          <input type=“text” value={lastName} onChange={(e) => setLastName(e.target.value)} />
        </label>
      </div>
      <div>
        <label>
          Пол:
          <select value={gender} onChange={(e) => setGender(e.target.value)}>
            <option value=“”>Выберите пол</option>
            <option value=“male”>Мужской</option>
            <option value=“female”>Женский</option>
            <option value=“other”>Другой</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Дата рождения:
          <input type=“date” value={dateOfBirth} onChange={(e) => setDateOfBirth(e.target.value)} />
        </label>
      </div>
      <button type=“submit”>Отправить</button>
    </form>
  );
}

export default Form;


В этом примере используется хук useState, чтобы отслеживать и обновлять значения полей формы. Обработчик handleSubmit вызывается при отправке формы и выполняет необходимые действия. Вы можете вставить данный компонент в своё приложение и использовать его для отображения формы заполнения данных.
ещё кнопка войти
Конечно! Добавим кнопку “Войти” к предыдущему примеру:

import React, { useState } from ‘react’;

function Form() {
  const [firstName, setFirstName] = useState(‘’);
  const [lastName, setLastName] = useState(‘’);
  const [gender, setGender] = useState(‘’);
  const [dateOfBirth, setDateOfBirth] = useState(‘’);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Обработка данных формы
    console.log(‘Отправленная форма:’, { firstName, lastName, gender, dateOfBirth });
    // Сброс значений полей формы
    setFirstName(‘’);
    setLastName(‘’);
    setGender(‘’);
    setDateOfBirth(‘’);
  };

  const handleLogin = () => {
    // Логика для кнопки “Войти”
    console.log(Вход выполнен: ${firstName} ${lastName});
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Имя:
          <input type=“text” value={firstName} onChange={(e) => setFirstName(e.target.value)} />
        </label>
      </div>
      <div>
        <label>
          Фамилия:
          <input type=“text” value={lastName} onChange={(e) => setLastName(e.target.value)} />
        </label>
      </div>
      <div>
        <label>
          Пол:
          <select value={gender} onChange={(e) => setGender(e.target.value)}>
            <option value=“”>Выберите пол</option>
            <option value=“male”>Мужской</option>
            <option value=“female”>Женский</option>
            <option value=“other”>Другой</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Дата рождения:
          <input type=“date” value={dateOfBirth} onChange={(e) => setDateOfBirth(e.target.value)} />
        </label>
      </div>
      <button type=“submit”>Отправить</button>
      <button type=“button” onClick={handleLogin}>Войти</button>
    </form>
  );
}

export default Form;


этот код вставлять в app.js ?