1

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

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

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",
        desc: "Modern React Development ",
        price: "50",

    },
      {
        title: "Master Class [MC2]a",
        desc: "Modern React Development ",
        price: "50",

    },
       {
        title: "Master Class [MC2]d",
        desc: "Modern React Development ",
        price: "50",

    }

]

4

1 回答 1

1

onChange: console.log您将在其中输入处理更改的函数的代码部分。

例如，如果您使用挂钩并希望根据更改为变量设置值，您可以执行类似的操作。

function TicketsGrid ({handleChange}) {
const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'tickets',
    defaultValue: 1,
    onChange: handleChange,
})
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 TicketBox

然后

import TicketBox from "./TicketBox";
    function View() {
        const [value, setValue] = useState()
        
            return (
            <TicketBox handleChange={setValue}/>
        )
    }

现在，每次您单击不同的按钮时，它都会改变值。

于 2021-08-14T18:56:29.567 回答