与 Chakra-UI 中的 Radio 结合使用时，选择不起作用答案

【问题标题】：Select does not work when combined with Radio in Chakra-UI与 Chakra-UI 中的 Radio 结合使用时，选择不起作用
【发布时间】：2021-10-20 08:06:21
【问题描述】：

我有一个设计，我需要将单选组和选择项目组合在一起。具体来说，当用户选择一个选项时，需要从列表中选择一个项目。

我在https://codesandbox.io/s/chakra-radio-select-cv6r0?file=/src/index.tsx 的实现显示了它的外观。

但是，当我单击列表以从下拉列表中进行选择时，没有任何反应。

select 独立工作，但嵌套在 RadioGroup 中时不能。这可以在codesandbox上重现

有人可以帮我理解这里的错误以及我需要做什么才能从列表中选择项目吗？

谢谢

【问题讨论】：

标签： javascript html reactjs jsx chakra-ui

【解决方案1】：

只需像这样将Select 输入移到Radio 组件之外

<Flex alignItems={"center"}>
  <Radio value={"LIST"}>
    <Text ml={2}>List</Text>
  </Radio>
  <Select
    w="unset"
    ml={4}
    placeholder="Select List"
    onChange={() => console.log("change")}
    value={"option 1"}
  >
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </Select>
</Flex>

【讨论】：