reactjs Shadcn -类型“BullkedState "不可分配给类型”boolean| ChangeEvent < Element>'

0sgqnhkj  于 5个月前  发布在  React
关注(0)|答案(3)|浏览(94)

我在使用shadcdn库的代码中遇到一个错误。该错误特别是在代码的以下部分中的Checkbox onbankedChange事件中发生的:

<FormField
    control={form.control}
    name="remember"
    render={({field}) => (
        <FormItem className="flex flex-row items-start space-x-3 space-y-0.5">
            <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange}/>
            </FormControl>
            <div className="space-y-1 leading-none">
                <FormLabel className="text-md cursor-pointer select-none">Angemeldet bleiben</FormLabel>
            </div>
        </FormItem>
    )}
/>

字符串
我得到的错误消息是:

TS2322: Type '(event: boolean | ChangeEvent<Element>) => void' is not assignable to type '(checked: CheckedState) => void'. Types of parameters 'event' and 'checked' are incompatible. Type 'CheckedState' is not assignable to type 'boolean | ChangeEvent<Element>'. Type '"indeterminate"' is not assignable to type 'boolean | ChangeEvent<Element>'.


此外,我还使用react-hook-form和zod进行验证,如以下代码片段所示:

const form = useForm({
    resolver: zodResolver(authSchema),
    defaultValues: {
        email: "[email protected]",
        password: "123456",
        remember: false
    }
});


您能帮助我了解这个错误的原因并提出可能的解决方案吗?

3xiyfsfu

3xiyfsfu1#

更新

Is似乎是ReactHookForm的一个已知问题。目前的解决方案是回滚到[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)

原始答案

我无法复制您的代码,但类型脚本错误表明onCheckedChange处理程序与field.onChange事件不兼容。

onCheckedChange={event => field.onChange(event.target.checked)}

字符串
如果这不起作用,因为它认为事件可能是布尔值,尝试:

onCheckedChange={event => {
    const isChecked = typeof event === "boolean" ? event : event.target.checked;
    field.onChange(isChecked);
}}


这可能不是完美的,因为我看不出什么是maskedState应该,但希望这将回答你的问题。

fzwojiic

fzwojiic2#

我也有同样的问题。一旦降级到email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),它就工作了。

xpszyzbs

xpszyzbs3#

我得到了同样的问题,一个坏的变通办法将使用!!

<Checkbox
              checked={selectAll}
              onCheckedChange={(checked) => {

                booleanChecked = !!checked;

              }}
            >

字符串
这是不好的,因为它是回避的typescript错误,这是说内部检查也可以inderminate和不能分配给布尔值。这应该得到妥善处理。

相关问题