復選框組件不起作用。 （材料用戶界面，反應鈎形式

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