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
    }
  }
);

如何正确选择默认的第一个单选按钮？我可以制作另一个挂钩，但是必须有一些内置的React挂钩形式吗？

Answer 1

请查看单选组示例的codesandbox： https://codesandbox.io/s/react-hook-form-controller-pz8oj?file=/src/index.js

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和默认选中的单选按钮

1 个答案: