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

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 />组件。 查看文档中的此部分以获取更多信息。