diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js index cf62cccc24..dcb4203537 100644 --- a/components/radio/__tests__/group.test.js +++ b/components/radio/__tests__/group.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount, render } from 'enzyme'; -import { render as testLibRender } from '@testing-library/react'; +import { fireEvent, render as testLibRender } from '@testing-library/react'; import Radio from '..'; describe('Radio Group', () => { @@ -224,4 +224,16 @@ describe('Radio Group', () => { }); }); }); + + it('onBlur & onFocus should work', () => { + const handleBlur = jest.fn(); + const handleFocus = jest.fn(); + const { container } = testLibRender( + , + ); + fireEvent.focus(container.firstChild); + expect(handleFocus).toHaveBeenCalledTimes(1); + fireEvent.blur(container.firstChild); + expect(handleBlur).toHaveBeenCalledTimes(1); + }); }); diff --git a/components/radio/group.tsx b/components/radio/group.tsx index 76dead66dc..60ea4703c8 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -28,93 +28,91 @@ const RadioGroup = React.forwardRef((props, ref } }; - const renderGroup = () => { - const { - prefixCls: customizePrefixCls, - className = '', - options, - buttonStyle = 'outline' as RadioGroupButtonStyle, - disabled, - children, - size: customizeSize, - style, - id, - onMouseEnter, - onMouseLeave, - } = props; - const prefixCls = getPrefixCls('radio', customizePrefixCls); - const groupPrefixCls = `${prefixCls}-group`; - let childrenToRender = children; - // 如果存在 options, 优先使用 - if (options && options.length > 0) { - childrenToRender = options.map(option => { - if (typeof option === 'string' || typeof option === 'number') { - // 此处类型自动推导为 string - return ( - - {option} - - ); - } - // 此处类型自动推导为 { label: string value: string } + const { + prefixCls: customizePrefixCls, + className = '', + options, + buttonStyle = 'outline' as RadioGroupButtonStyle, + disabled, + children, + size: customizeSize, + style, + id, + onMouseEnter, + onMouseLeave, + onFocus, + onBlur, + } = props; + const prefixCls = getPrefixCls('radio', customizePrefixCls); + const groupPrefixCls = `${prefixCls}-group`; + let childrenToRender = children; + // 如果存在 options, 优先使用 + if (options && options.length > 0) { + childrenToRender = options.map(option => { + if (typeof option === 'string' || typeof option === 'number') { + // 此处类型自动推导为 string return ( - {option.label} + {option} ); - }); - } + } + // 此处类型自动推导为 { label: string value: string } + return ( + + {option.label} + + ); + }); + } - const mergedSize = customizeSize || size; - const classString = classNames( - groupPrefixCls, - `${groupPrefixCls}-${buttonStyle}`, - { - [`${groupPrefixCls}-${mergedSize}`]: mergedSize, - [`${groupPrefixCls}-rtl`]: direction === 'rtl', - }, - className, - ); - return ( -
+ {childrenToRender} -
- ); - }; - - return ( - - {renderGroup()} - + + ); }); diff --git a/components/radio/interface.tsx b/components/radio/interface.tsx index 89143e148f..e38d232829 100644 --- a/components/radio/interface.tsx +++ b/components/radio/interface.tsx @@ -20,6 +20,8 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps { id?: string; optionType?: RadioGroupOptionType; buttonStyle?: RadioGroupButtonStyle; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; } export interface RadioGroupContextProps {