Fix the bug that radio onchange will be ovrride by radioGroup onchange (#14364)

* Fix the bug that radio onchange will be ovrride by radioGroup onchange

* Update

* Remove unused comment

* Add tests

* Update

components/radio/__tests__/group.test.js

@@ -68,6 +68,37 @@ describe('Radio', () => {
     expect(onChange.mock.calls.length).toBe(2);
   });
 
+  it('both of radio and radioGroup will trigger onchange event when they exists', () => {
+    const onChange = jest.fn();
+    const onChangeRadioGroup = jest.fn();
+
+    const wrapper = mount(
+      <RadioGroup onChange={onChangeRadioGroup}>
+        <Radio value="A" onChange={onChange}>
+          A
+        </Radio>
+        <Radio value="B" onChange={onChange}>
+          B
+        </Radio>
+        <Radio value="C" onChange={onChange}>
+          C
+        </Radio>
+      </RadioGroup>,
+    );
+    const radios = wrapper.find('input');
+
+    // uncontrolled component
+    wrapper.setState({ value: 'B' });
+    radios.at(0).simulate('change');
+    expect(onChange.mock.calls.length).toBe(1);
+    expect(onChangeRadioGroup.mock.calls.length).toBe(1);
+
+    // controlled component
+    wrapper.setProps({ value: 'A' });
+    radios.at(1).simulate('change');
+    expect(onChange.mock.calls.length).toBe(2);
+  });
+
   it("won't fire change events when value not changes", () => {
     const onChange = jest.fn();
 

components/radio/radio.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
 import RadioGroup from './group';
 import RadioButton from './radioButton';
-import { RadioProps, RadioGroupContext } from './interface';
+import { RadioProps, RadioChangeEvent, RadioGroupContext } from './interface';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export default class Radio extends React.Component<RadioProps, {}> {
@@ -44,6 +44,16 @@ export default class Radio extends React.Component<RadioProps, {}> {
     this.rcCheckbox = node;
   };
 
+  onChange = (e: RadioChangeEvent) => {
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
+
+    if (this.context.radioGroup && this.context.radioGroup.onChange) {
+      this.context.radioGroup.onChange(e);
+    }
+  };
+
   renderRadio = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { props, context } = this;
     const { prefixCls: customizePrefixCls, className, children, style, ...restProps } = props;
@@ -52,7 +62,7 @@ export default class Radio extends React.Component<RadioProps, {}> {
     const radioProps: RadioProps = { ...restProps };
     if (radioGroup) {
       radioProps.name = radioGroup.name;
-      radioProps.onChange = radioGroup.onChange;
+      radioProps.onChange = this.onChange;
       radioProps.checked = props.value === radioGroup.value;
       radioProps.disabled = props.disabled || radioGroup.disabled;
     }