Skip to content

开发工具

React Hook Form 开发工具可帮助验证您的表单。

React Hook Form DevTools

特征

基于React

DevTool本身是由React构建的，因此您可以轻松地与React应用程序集成。

</>

开发体验

React Hook Form致力于在使用React构建表单方面提供丰富的经验。此工具将帮助调试表单。

开源

DevTools是一个开源项目，因此我们所有人都可以一起改善体验。

</> 安装

步骤 1: 安装 @hookform/devtools作为开发依赖包.

npm install @hookform/devtools

步骤 2: 与您的React集成 App就像将组件导入到您的App / Form， 然后加入control到其开发工具组件中。

import React from "react";
import { useForm } from "react-hook-form";
import { DevTool } from "@hookform/devtools";

export default () => {
  const { register, control, handleSubmit } = useForm({
    mode: "onChange",
  });

  return (
    <>
      <form onSubmit={handleSubmit(d => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input {...register("test")} />

        <input type="submit" />
      </form>
      
      <DevTool control={control} /> {/* set up the dev tool */}
    </>
  );
};

现场演示

您可以与以下演示交互，以查看实际的开发工具。

GitHub Repo

Example

功能性

  • 读取输入和整个表单状态。

  • 注意: 因为RHF基于 不受控制的输入，update按钮将刷新DevTool读取最新的输入值和表单状态。

  • 输入或表单有效或无效时的视觉反馈

  • 搜索注册的输入以及自定义注册的组件。

  • 注意: 您可以轻松找通过点击Native按钮进行输入。这会很有用在处理大型表单时。

■ RHF DevTools

Edit