Chakra UI 自定义单选按钮单击时没有任何反应

问题描述

我正在尝试使用 chakra UI 自定义单选按钮创建单选按钮列表，我遵循了 here 中的文档

问题是当我点击一个单选按钮（自定义组件）时什么也没有发生，它应该改变背景颜色 我唯一得到的是控制台中的点击次数， 我不确定文档中的这部分代码应该做什么而不是控制台登录？

onChange: console.log,

无线电包装器组件的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react'
import { SimpleGrid,useRadioGroup } from '@chakra-ui/react'
import TicketBox from './TicketBox'
import { tickets } from 'components/forms/tickets/tickets'
interface Props {}

const TicketsGrid = (props: Props) => {
    const { getRootProps,geTradioProps } = useRadioGroup({
        name: 'tickets',defaultValue: 1,onChange: console.log,})
    const group = getRootProps()
    return (
        <SimpleGrid columns={[1,2]} gap="24px" {...group}>
            {tickets.map((ticket) => {
                const radio = geTradioProps(ticket)
                return (
                    <TicketBox
                        key={ticket.title}
                        title={ticket.title}
                        desc={ticket.desc}
                        price={ticket.price}
                        {...radio}
                    />
                )
            })}
        </SimpleGrid>
    )
}

export default TicketsGrid

和实际单选按钮的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react'
import { Box,Image,Flex,useRadio } from '@chakra-ui/react'
import { Title,BodyText } from 'components/UI'
interface Props {
    title: string
    desc: string
    price: string
}

const TicketBox = ({ title,desc,price,...props }: Props) => {
    const { getInputProps,getCheckBoxProps } = useRadio(props)

    const input = getInputProps()
    const checkBox = getCheckBoxProps()
    return (
        <Box as="label">
            <input {...input} />
            <Box
                {...checkBox}
                w={['100%','441px']}
                borderRadius="3px"
                bg="#FAFAFA"
                p="16px"
                cursor="pointer"
                _checked={{
                    bg: '#FFF4CC',}}
                _focus={{
                    BoxShadow: 'outline',}}
            >
                <Flex>
                    <Image src="/images/icons/checkmarksign.svg" mr="20px" />
                    <Box flexGrow={2}>
                        <Title value={title} fontSize="16px" mb="6px" />
                        <BodyText value={desc} fontSize="12px" fontWeight="400" />
                        <BodyText value={price} fontSize="16px" float="right" fontWeight="400" />
                    </Box>
                </Flex>
            </Box>
        </Box>
    )
}

export default TicketBox

门票数据：

export const tickets = [
    {
        title: "All Master Classes pass",desc: "access to all 4 classes",price: "150",},{
        title: "Master Class [MC2]c",desc: "Modern React Development ",price: "50",{
        title: "Master Class [MC2]b",{
        title: "Master Class [MC2]a",{
        title: "Master Class [MC2]d",}

]

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）