React-hook-form Demo之外——实际的用法

Posted 2023-05-15

参考技术A 在react-hook-form的API中，有着 control 和 useControl 两个接口。官方文档描述的太过于简陋，以至于并不能帮你解决什么问题。

实际上，control被用于复杂表单下的这些场景，如果你有以下场景的需求，看下去：

出现这样的需求往往是由于html的原生组件不能满足我们的需求，而一些组件库的风格又比较固定，不太好改成符合我们自己的界面风格。和实际业务场景中的表单十分复杂，为了达到结构简化和复用等目的，我们需要将其中子区域抽成一个组件，但是又要在一个form内受useForm的控制。

所以，当需要将关联在一起的input组合成一个组件，我们一般会这么写：

可以看到，在使用的时候control由useForm创建，useForm将一系列框架的方法和事件打包在其中用于作为参数传入。name,defaultVlue,control是UseControllerProps定义的参数，然后通过useController将control解包出来成了field，它与外部的register()的返回值一致。

但是，你说都抽成组件了，还是和外面的用法一样，control只是过了一道手而已，我想自己在中间加入我的控制怎么办。这个时候官方文档就不会告诉你怎么写，所以我们举个两个复杂例子：

这个例子就复杂很多，它是一个数字的编辑器，在输入后按回车和点击上下箭头调整数字时触发change事件。
要实现这个就解决三个问题，

拦截input的onChange事件，在其中判断用户时鼠标点击还是在键盘输入。同时，处理onKeyDown事件，在用户按下回车时，触发change。

我们知道input控件实现值编辑就是通过onChange事件改变状态后重新render实现的，但是在这个场景下，我们拦截了onChange事件，这样input就处于不可编辑的状态。所以添加一个内部状态editorValue作为编辑值，在onChange事件中修改状态，保证input可编辑。

当前编辑值改为内部状态后，我们就和form中的值失去了联系了。除了从defaultValue传入的初始值之外，外部setValue()当前name的时候，控件就不会有任何响应。我们通过useWatch来监视当前name来，当外部setValue时，我们收到消息，改变input控件的状态值。

关闭表单时从 react-hook-form 重置值

【中文标题】关闭表单时从 react-hook-form 重置值

【英文标题】：Reset values from react-hook-form when the form is closed

【发布时间】：2022-01-23 05:12:42

【问题描述】：

具有以下组件：

import  yupResolver  from '@hookform/resolvers/yup';
import  useForm  from 'react-hook-form';
import * as yup from 'yup';

import  useToggle  from '../shared/hooks';
import 
  SubsectionLayout,
  Footer,
  Textarea,
  Input,
  Modal,
  Button
 from '../shared/ui-components';

const schema = yup.object().shape(
  name: yup.string().required(),
  description: yup.string().required()
);

export interface ITask 
  name: string;
  description: string;


export function MainComponent() 
  const [isOpened, toggleModal] = useToggle(false);

  const  handleSubmit, register, reset  = useForm(
    resolver: yupResolver(schema)
  );

  const onSubmit = (data: ITask) => 
    console.log('data: ', data);
    toggleModal();
    reset(data);
  ;

  return (
    <div>
      <Button onClick=toggleModal />
      <SubsectionLayout title='test'>
        <Modal
          title='add element'
          open=isOpened
          onClose=toggleModal
          footer=
            <Footer onSubmit=handleSubmit(onSubmit) onCancel=toggleModal editMode=true />
          
        >
          <div>
            <Input
              inputId='calculation-engine-script-name'
              label='name'
              ...register('name')
            />

            <Textarea label='description' ...register('description') />
          </div>
        </Modal>
      </SubsectionLayout>
    </div>
  );

export default MainComponent;

它有一个按钮，点击它会打开一个模式，用户可以在其中写入 name 和 description 字段。

当点击提交按钮时，它必须记录内容（用于测试目的）并关闭模式。

问题是当我再次打开modal时，之前引入的输入还在。

我在onSubmit() 中添加了reset(data)，但似乎还不够。

有什么想法吗？

【问题讨论】：

看起来您正在尝试使用提交表单时获得的值重置值。不应该是reset()之类的吗？

@RameshReddy 我试过这样但结果相同

你试过reset( name: '', description: '' );吗？

official react-hook-form docs 在“重置提交”中他们只是添加了reset( ...data );

@ShakyaKarunathilake，您的第一条评论有正确的解决方案

【参考方案1】：

试试reset( name: '', description: '' );