react-hooks-forms 和默认选中的单选按钮

Question

我正在使用 React Hooks 表单并尝试了大多数默认检查单选按钮的方法：

<FormGroup tag="fieldset">
  <FormGroup check>
    <Label check>
      <Input type="radio" name="isIBAN" innerRef={register} defaultChecked/> IBAN
    </Label>
  </FormGroup>
  <FormGroup check>
    <Label check>
      <Input type="radio" name="isIBAN" innerRef={register} value={false} /> BIC/SWIFT
    </Label>
  </FormGroup>             
</FormGroup>

我不知道你是否可以从默认值开始：

const { register, handleSubmit, errors, setValue, getValues  } = useForm(
  {
    defaultValues:{
      accountNr: "XXXXKB20201555555555",
      bic:"XXXDKKK",
      isIBAN:true
    }
  }
);

默认选中第一个单选按钮的正确方法是怎样的？我可以制作另一个钩子，但必须有一些内置的反应钩子形式吗？

Answer 1

请查看无线电组示例的 codesandbox demo。

const defaultValues = {
  Native: "",
  TextField: "",
  Select: "",
  ReactSelect: { value: "vanilla", label: "Vanilla" },
  Checkbox: false,
  switch: false,
  RadioGroup: "female", // default value is the radio input value
  numberFormat: 123456789,
  downShift: "apple"
};

<section>
  <label>Radio Group</label>
  <Controller
    as={
      <RadioGroup aria-label="gender">
        <FormControlLabel
          value="female"
          control={<Radio />}
          label="Female"
        />
        <FormControlLabel
          value="male"
          control={<Radio />}
          label="Male"
        />
      </RadioGroup>
    }
    name="RadioGroup"
    control={control}
  />
</section>

react-hooks-forms 和默认选中的单选按钮

react-hooks-forms and default checked radio button

reactjs

react-hook-form