React useForm Хук

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38385{{"React useForm Хук"}} react/event_handling -.-> lab-38385{{"React useForm Хук"}} react/hooks -.-> lab-38385{{"React useForm Хук"}} react/use_state_reducer -.-> lab-38385{{"React useForm Хук"}} end

Хук useForm в React

В ВМ уже предоставлены index.html и script.js. В общем случае вам нужно только добавлять код в script.js и style.css.

Для создания состояния на основе полей формы вы можете использовать хук useState(), чтобы создать переменную состояния для значений в форме. Затем создайте функцию, которая обновляет переменную состояния в зависимости от соответствующего события, которое срабатывает при взаимодействии с полем формы.

Вот пример реализации:

const useForm = (initialValues) => {
  const [values, setValues] = React.useState(initialValues);

  return [
    values,
    (e) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ];
};

В приведенном выше примере useForm() принимает начальный объект состояния, создает переменную состояния values с использованием useState() и возвращает массив, содержащий values и функцию, которая обновляет values в зависимости от переданного ей события.

Вы можете использовать useForm() в компоненте формы следующим образом:

const Form = () => {
  const initialState = { email: "", password: "" };
  const [values, setValues] = useForm(initialState);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" onChange={setValues} />
      <input type="password" name="password" onChange={setValues} />
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Form />);

В компоненте Form функция useForm() вызывается с начальным объектом состояния и возвращает массив, содержащий values и setValues(). Функция handleSubmit() выводит объект values в консоль при отправке формы. Элементы input настроены для обновления значений формы с использованием функции setValues().

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по хукy useForm в React. Вы можете попробовать еще несколько практических занятий в LabEx, чтобы улучшить свои навыки.