React Hook Form Controller 和 React-Bootstrap Form.Check radio

Question

我正在使用 React Hook Form 和 React-Bootstrap，我正在尝试设置一个单选按钮组。

Radio 1

应该默认选中，然后用户可以在它们之间切换。

因为我使用的是来自 React-Bootstrap 的

Form.Check

，所以我将它包装在 React Hook Form

Controller

（Wrapper 组件用于受控输入）。

它应该是这样的：

这适用于所有普通文本输入：

<Controller
  control={control}
  name="name"
  defaultValue=""
  render={({ field: { onChange, value, ref } }) => (
    <Form.Control
      type="text"
      onChange={onChange}
      placeholder="Name"
      value={value}
      isInvalid={!!errors.name}
      ref={ref}
    />
  )}
/>

但是对于单选框这似乎不起作用。它的渲染没有默认的复选框，我可以选择它们，并且提交的数据总是相同的。

这是单选框的代码：

Controller
  control={control}
  name="myradiovalue"
  defaultValue="radio1"
  render={({ field: { onChange } }) => (
    <>
      <Form.Check
        onChange={onChange}
        type="radio"
        label="Radio 1"
        id="formAdapterRadio1"
        value="radio1"
      />
      <Form.Check
        onChange={onChange}
        type="radio"
        label="Radio 2"
        id="formAdapterRadio2"
        value="radio2"
      />
    </>
  )}
/>

这应该怎么看？单独的

Controller

可能吗？

Answer 1

这里有个例子：

https://www.freecodecamp.org/news/how-to-create-forms-in-react-using-react-hook-form/#how-to-use-other-input-types-with-react -钩形

使用 react-bootstrap 似乎没有必要转到 react-hook-form 文档建议的 Controller/useController 路径。

对于每个 元素，只需对构成“foo”选择的每个复选框使用 ...register("foo")。

    <Form.Check
      value="bar"
      type="radio"
      label="This is a bar"
      {...register("foo")}
    />
    <Form.Check
      value="woozle"
      type="radio"
      label="This is a woozle"
      {...register("foo")}
    />