复选框组件不起作用。 （材料用户界面，反应钩形式

Question

我正在使用材质复选框，但它不会返回 true 或 false。这是我的代码：

 <FormControlLabel
      control={
        <Checkbox defaultValue={data.hasPhone} defaultChecked={data.hasPhone} color="primary" {...register("hasPhone")}/>            
      }
      label="Do you have a phone"
    />

{hasPhone && (
              <Input
                {...register("phoneNumber")}
                id="phoneNumber"
                type="tel"
                label="Cellulare"
                name="phoneNumber"
              />
            )}

当复选框为真时，我们有一个条件“hasPhone”打开另一个输入字段。 如果我使用这样的复选框：

<input type="checkbox" placeholder="Developer" {...register("hasPhone")} />

在上述情况下，条件正常工作。

你能帮我吗？谢谢

Answer 1

它适用于您的“hasPhone”<input /> 的原因是它是一个原生表单元素，与 Material UI <Checkbox /> 组件相反，后者是一个外部控制输入。

因此对于原生表单元素，您可以使用 register，但对于外部受控组件，您必须使用 RHF 的 <Controller /> 组件。查看文档中的此 section 以获取更多信息。