[备忘录] React Hook form怎么用？

2 年 ago

韵, 科

3 minutes

首先

这篇文章仅仅是根据我之前在 GitHub 上写的 TIL（Today I Learn）笔记随手写成的，请事先知晓。（如果想要了解更详细的内容，请参考附上的优质资料）

如果使用React Hook Form，就可以不使用复杂的状态管理，如useState或useRef等，来创建表单。

引言的开始

在过去，创建表单时我经常使用useState或者useRef来进行状态管理，但是状态管理变得过多或者验证变得困难等等问题经常困扰我。于是我决定尝试并引入了备受瞩目的React Hook Form库，希望能够使用这个简单而又强大的库来解决我的问题。

迄今为止的实施方式

使用useState (状态管理过于复杂)

如果输入数量继续增加，那就得相应地增加状态。

import React, { useState } from 'react';

const LoginForm = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信ロジックを追加する
    console.log('Submitted:', name, password, email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          名前:
          <input type="text" value={name} onChange={handleNameChange} />
        </label>
      </div>
      <div>
        <label>
          パスワード:
          <input type="password" value={password} onChange={handlePasswordChange} />
        </label>
      </div>
      <div>
        <label>
          メールアドレス:
          <input type="email" value={email} onChange={handleEmailChange} />
        </label>
      </div>
      <div>
        <button type="submit">送信</button>
      </div>
    </form>
  );
};

export default LoginForm;

使用useRef

import React, { useRef } from 'react';

const LoginForm = () => {
  const nameRef = useRef('');
  const passwordRef = useRef('');
  const emailRef = useRef('');

  const handleSubmit = (event) => {
    event.preventDefault();

    const name = nameRef.current.value;
    const password = passwordRef.current.value;
    const email = emailRef.current.value;

    // フォームの送信ロジックを追加する
    console.log('Submitted:', name, password, email);

    // 入力フィールドをクリアする
    nameRef.current.value = '';
    passwordRef.current.value = '';
    emailRef.current.value = '';
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          名前:
          <input type="text" ref={nameRef} />
        </label>
      </div>
      <div>
        <label>
          パスワード:
          <input type="password" ref={passwordRef} />
        </label>
      </div>
      <div>
        <label>
          メールアドレス:
          <input type="email" ref={emailRef} />
        </label>
      </div>
      <div>
        <button type="submit">送信</button>
      </div>
    </form>
  );
};

export default LoginForm;

使用React Hook Form的好处是什么？

采用了Uncontrolled Components模式，可以减少渲染次数

优点1

React Hook Form能够极大地简化表单状态的管理。与使用普通的React的useState或useReducer相比，它可以用更少的代码来管理表单状态。表单的值和验证错误等状态都是在React Hook Form内部进行管理的，开发人员不需要显式地管理状态。

以下是「メリット2」的中文翻譯：

优点2

React Hook Form是一个轻量级的库，可以最小化额外的依赖和包的大小。这样可以提高性能，并实现方便构建和维护表单。此外，还可以按需导入所需的功能，避免包含不必要的功能。

3个优点

React Hook Form 采用了非受控组件模式。这样一来，就不需要将表单的输入状态保存为React状态，从而减少了表单组件重新渲染的次数。此外，即使发生了表单值的更改，也不会导致整个表单组件重新绘制。这样可以提高性能并改善用户体验。

实施案例

import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" {...register('email')} />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input id="password" {...register('password')} type="password" />
        </div>
        <button type="submit">ログイン</button>
      </form>
    </div>
  );
}

export default App;

// registerで登録する
<input id="password" {...register("password")} type="password" />

// validationはターゲットの横に書く
<input
  id="password"
  {...register("password", { required: true })}
  type="password"
/>

验证库

听说Zod和Yup是一个常见的验证库，所以尝试引入它们是个不错的选择（个人更偏爱Zod）。

参考资料的内容。

私のTIL