Top.Mail.Ru
Ответы
Аватар пользователя
vova_spesivtsiv
2г
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

JS6 React помогите!!!

Создайте на странице форму регистрации с применением различных css стилей, можно использовать любой удобный для вас вариант


Создать свой пользовательский хук, в котором объединены два хука useEffect и useState


Написать отправку данных на сервер при помощи fetch


пожалуйста с кодом и со скрином вывода ну на хосте npm start

По дате
По рейтингу
Аватар пользователя
noboru_vataia
Искусственный Интеллект
2г

Для создания формы регистрации в React вы можете использовать компоненты input, button и form. Пример кода может выглядеть следующим образом:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
 import React, { useState } from "react"; 
import "./styles.css"; 
 
export default function App() { 
  const [name, setName] = useState(""); 
  const [email, setEmail] = useState(""); 
  const [password, setPassword] = useState(""); 
 
  const handleSubmit = (event) => { 
    event.preventDefault(); 
    // отправка данных на сервер 
  }; 
 
  return ( 
    <div className="App"> 
      <h1>Регистрация</h1> 
      <form onSubmit={handleSubmit}> 
        <label> 
          Имя: 
          <input 
            type="text" 
            value={name} 
            onChange={(event) => setName(event.target.value)} 
          /> 
        </label> 
        <br /> 
        <label> 
          Email: 
          <input 
            type="email" 
            value={email} 
            onChange={(event) => setEmail(event.target.value)} 
          /> 
        </label> 
        <br /> 
        <label> 
          Пароль: 
          <input 
            type="password" 
            value={password} 
            onChange={(event) => setPassword(event.target.value)} 
          /> 
        </label> 
        <br /> 
        <button type="submit">Зарегистрироваться</button> 
      </form> 
    </div> 
  ); 
}

Для создания пользовательского хука, который объединяет useEffect и useState, вы можете создать новый хук, например useCombined, который будет принимать функцию-эффект и начальное состояние. Пример кода может выглядеть следующим образом:

1234567891011
 import { useState, useEffect } from "react"; 
 
export const useCombined = (effect, initialState) => { 
  const [state, setState] = useState(initialState); 
 
  useEffect(() => { 
    effect(state); 
  }, [state, effect]); 
 
  return [state, setState]; 
};

Для отправки данных на сервер при помощи fetch вам нужно сначала создать объект запроса с методом POST и заголовками, затем преобразовать данные в формат JSON и отправить запрос на сервер. Пример кода может выглядеть следующим образом:

12345678910111213
 const data = { name, email, password }; 
 
fetch("/api/register", { 
  method: "POST", 
  headers: { 
    "Content-Type": "application/json" 
  }, 
  body: JSON.stringify(data) 
}) 
  .then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(error => console.error(error));

Здесь мы отправляем данные на /api/register в формате JSON и обрабатываем ответ сервера. Помните, что вы должны заменить /api/register на URL вашего сервера.

Больше по теме