我正在使用React Hook窗体和React Bootstrap，并且正在尝试设置一个单选按钮组。Radio 1应默认选中，然后用户可以在它们之间切换。
因为我使用的是来自React-Bootstrap的Form.Check，所以我将它 Package 在React钩子表单Controller（Wrapper component for controlled inputs）中。
它应该如下所示：
这适用于所有普通文本输入：
<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？
1条答案
按热度按时间kkih6yb81#
这里有一个例子：
https://www.freecodecamp.org/news/how-to-create-forms-in-react-using-react-hook-form/#how-to-use-other-input-types-with-react-hook-form
对于react-bootstrap，似乎没有必要转到react-hook-form文档建议的Controller/useController路径。
对于每个元素，只需对组成"foo"选项的每个复选框使用... register（"foo"）。<Form.Check> element, just use ...register("foo") for each of the checkboxes making up the "foo" selection.