为自定义输入字段实现一个清除按钮，以使用 react hook 表单触发所需的错误

Question

期待

当我们使用十字按钮清除输入字段时，React Hook 表单应该显示错误消息

问题

1. 使用十字按钮清除值后未显示所需的错误消息。
2. 使用十字按钮清除值后，提交按钮不会被禁用。

自定义输入字段的代码

import React, { useRef } from 'react';

export default function MyInput(props) {
  const inputRef = useRef();

  const clear = () => {
    if (inputRef.current) {
      inputRef.current.value = '';
    }
  }

  return (
    <>
      <input ref={inputRef} {...props} />
      {/* I want to trigger the required error of react hook form on clear*/}
      <button onClick={clear} style={{
        marginLeft: '-1.2rem',
        cursor: 'pointer'
      }}>x</button>
    </>
  );
}

表格中的用法

          <Controller
            name="firstName"
            control={control}
            rules={{
              required: {
                value: true,
                message: 'You must enter your first name'
              }
            }}
            render={({ field: { ref, ...rest } }) => <CustomInput {...rest} />}
          />

不确定 useRef 是否正确，但我想使用一个不受控制的输入，我想用一个清除按钮进行自定义

链接到 Stackblitz - Custom Input with clear Button

Answer 1

在单击清除按钮时让表单知道更改的一种方法是从 setValue 挂钩调用 useForm 方法以手动注册更改。

所以，我可以将 setValue 作为道具传递给我的子组件，即自定义输入 并在输入字段的清除按钮的点击事件上设置新值

  const clear = () => {
    setValue(name, '', { 
      shouldValidate: true, 
      shouldDirty: true 
    });
  }

此用例也不需要 useRef。

更新的 Stackblitz 链接 - Custom Input with clear Button