了解 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
我在一个我之前创建的网站上工作,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