Select 在 Chakra-UI 中与 Radio 结合使用时不起作用

Question

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

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

但是，当我从下拉列表中单击列表到 select 时，没有任何反应。

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

有人可以帮助我了解这里有什么不正确的地方，以及我需要做什么才能从列表中找到 select 项目吗？

谢谢

Answer 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>