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

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>

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

Select does not work when combined with Radio in Chakra-UI

javascript

html

reactjs

jsx

chakra-ui