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

问题描述

我正在尝试使用 react-hook-form 库来验证表单.当我使用 ant design 或 material 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'}

发生了一些警告:"Missing name at....".

推荐答案

react hook form author here.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

好吧，你可能想知道这样做有什么意义，你从带有受控组件的 React 钩子形式中得到了什么?首先，您仍然可以根据自己的选择从我们的构建验证或架构验证中受益.其次，这将通过将您的输入状态更新与自身隔离来提高您的应用或表单性能，这意味着即使使用受控组件，您的表单根也可能会重新渲染为 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.

这是代码和框示例: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 已合并到主 repo 中并重命名为 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屋！