Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🎮 Обработка форм с использованием useActionState

Проблема: управление состоянием формы и её отправкой может быть сложным, особенно при наличии валидации и асинхронных операций.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useActionState для управления состоянием формы, включая её отправку и обработку ошибок.

Пример кода:

import React, { useState } from 'react';

function useActionState(initialState) {
  const [state, setState] = useState(initialState);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (action) => {
    setIsSubmitting(true);
    try {
      await action();
      setState(initialState);
    } catch (err) {
      setError(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { state, isSubmitting, error, submit };
}

function LoginForm() {
  const { state, isSubmitting, error, submit } = useActionState({
    username: '',
    password: '',
  });

  const handleSubmit = () => {
    submit(async () => {
      // Асинхронная отправка данных
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={state.username}
        onChange={(e) => setState({ ...state, username: e.target.value })}
      />
      <input
        type="password"
        value={state.password}
        onChange={(e) => setState({ ...state, password: e.target.value })}
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

Преимущества:

— Управление состоянием формы и её отправкой.
— Обработка ошибок и асинхронных операций.
— Упрощение кода формы.

➡️ Еще больше полезных книг — в нашем канале @progbook

🐸 Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5👍2

www.tg-me.com/us/Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js/com.frontendproglib/6316

1.91K viewsJul 1 at 07:00

🎮 Обработка форм с использованием useActionState

Проблема: управление состоянием формы и её отправкой может быть сложным, особенно при наличии валидации и асинхронных операций.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useActionState для управления состоянием формы, включая её отправку и обработку ошибок.

Пример кода:

import React, { useState } from 'react';

function useActionState(initialState) {
  const [state, setState] = useState(initialState);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (action) => {
    setIsSubmitting(true);
    try {
      await action();
      setState(initialState);
    } catch (err) {
      setError(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { state, isSubmitting, error, submit };
}

function LoginForm() {
  const { state, isSubmitting, error, submit } = useActionState({
    username: '',
    password: '',
  });

  const handleSubmit = () => {
    submit(async () => {
      // Асинхронная отправка данных
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={state.username}
        onChange={(e) => setState({ ...state, username: e.target.value })}
      />
      <input
        type="password"
        value={state.password}
        onChange={(e) => setState({ ...state, password: e.target.value })}
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}