如何在蚂蚁设计或材质 UI 中使用 react-hook-form [英] How to use react-hook-form with ant design or material UI

问题描述

我正在尝试使用react-hook-form库来验证表单.当我使用蚂蚁设计或材质UI渲染视图时，它无法正常工作.

I'm trying to use react-hook-form library to validate a form. When I render view using ant design or material UI, it does not work correctly.

<Input name="firstName" ref={register({ required: true })} />
  {errors.firstName && 'First name is required'}

发生了一些警告:在...处缺少名称." .

推荐答案

在这里反应钩子表单作者.React Hook Form包含不受控制的组件和本机输入，但是很难避免使用外部受控组件，例如React-Select，AntD和Material-UI.因此，我构建了一个包装器组件，以帮助您更轻松地集成.

react hook form author here. React Hook Form embrace uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and Material-UI. So I have built a wrapper component to help you integrate easier.

https://github.com/react-hook-form/react-hook-form-input

好吧，您可能想知道这样做的目的是什么，从受控制的组件的反应挂钩形式中得到什么?首先，您仍然可以从我们选择的构建验证或架构验证中受益.其次，这可以通过将输入状态更新与其自身隔离来改善您的应用程序或表单的性能，这意味着即使使用受控制的组件，也可以通过0重新渲染来生成您的表单根.

Ok you may wonder what’s the point of doing this, and what are you gettin out from react hook form with controlled components? Firstly, you still benefit from our in build validation or schema validation at your choice. Secondary this will improve your app or form performance by isolating your input state update to itself, which means ur form root can be resulted with 0 re-render even with controlled component.

这是codeandbox示例: https://codesandbox.io/s/react-hook-form-hookforminput-rzu9s

Here is codesandbox example: https://codesandbox.io/s/react-hook-form-hookforminput-rzu9s

希望这些有道理，而我创建的额外组件也可以为您提供帮助.

Hopefully those make sense and that extra component Which I have created helps you too.

在此之上，我还构建了一个包装器组件，以使事情变得容易一些:

On top this, i have also built a wrapper component to make things a bit easier:

import React from 'react';
import useForm from 'react-hook-form';
import { RHFInput } from 'react-hook-form-input';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

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

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <RHFInput
        as={<Select options={options} />}
        rules={{ required: true }}
        name="reactSelect"
        register={register}
        setValue={setValue}
      />
      <button
        type="button"
        onClick={() => {
          reset({
            reactSelect: '',
          });
        }}
      >
        Reset Form
      </button>
      <button>submit</button>
    </form>
  );
}

https://github.com/react-hook-form/react-hook-form-input

更新

React-hook-form-v4，react-hook-form-input已合并到主存储库中，并重命名为Controller.

React-hook-form v4, react-hook-form-input has been merged into the main repo and renamed to Controller.

https://react-hook-form.com/api#Controller

这篇关于如何在蚂蚁设计或材质 UI 中使用 react-hook-form的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！