React Bootstrap Radion 按钮如何设置默认值

Question

我从数组中获取单选按钮的值并列出这些选项。 当我映射数组的所有元素时，默认情况下不会选择任何选项。 我尝试使用“checked”和“defaultChecked”设置第一个选项，但没有成功。当我使用“checked”时，我的功能不再起作用。 我如何在这里设置默认第一个选项？

const genders = [
  {
    id: 1,
    gender: "male",
  },
  {
    id: 2,
    gender: "female",
  },
  {
    id: 3,
    gender: "do not want to share",
  },
];

export function Gender() {
  const [genderValue, setGender] = useState(1);

  const changeGenderValue = (e) => {
    const genderInputValue = e.target.id;
    setGender(genderInputValue);
    console.log(genderInputValue);
  };
  return (
    <>
      <Form>
        {genders.map((gender, key) => (
          <Form.Check
            key={key}
            className="mb-3"
            label={gender.gender}
            name="gendersInput"
            type="radio"
            id={gender.id}
            value={genderValue}
            onChange={changeGenderValue}
          />
        ))}
      </Form>
    </>
  );
}

Answer 1

有条件地设置defaultChecked是我的案例的解决方案。

我用下面的代码解决了我的问题。

<Form>
            {productStatusTypes.map((type, key) => (
              <Form.Check
                key={key}
                className="mb-3"
                type="radio"
                id={type.id}
                label={type.name}
                name="productStatus"
                value={filteredShop}
                onChange={onProductStatusChange}
                defaultChecked={type.id == 1}
              />
            ))}
          </Form>