了解 React-hook-form 控制器

Understanding React-hook-form Controller

我在一个我之前创建的网站上工作,ui它使用了我以前从未见过的 react-hook-form 的控制器部分的方法。

这是代码示例:

const CheckboxController = (props: CheckboxProps) => {
  return (
    <Wrapper>
      <Controller as={CheckboxInput} {...props} /> 
    </Wrapper>
  );
};

CheckboxInput 是一个简单的 material-ui 复选框。

我理解使用像这样的东西的传统方法:

const CheckboxController = (props: CheckboxProps) => {
  return(
    <Controller
    name={props.name}
    control={props.control}
    render={({ field }) => (
      <label>
          <Checkbox
            onChange={(e) => field.onChange(e.target.checked)}
            checked={props.checked}
            disabled={props.isDisabled}
            />
            {props.label}
        </label>
      )}
    />
  );
};

但不幸的是,整个网站都是 uild 在 <Controller as={}> 设置上。我似乎无法在网上找到任何关于它的信息来弄清楚它是如何工作的。有谁知道这种方法或可以指出正确的方向吗?谢谢。

巴克利。 该项目似乎正在使用 react-hook-form 的旧版本,其版本为 v5。 您可以在此处找到 api 文档: https://react-hook-form.com/v5/api