feat(radio): radioGroup change callback context add name attr(#4491)

closed #4350 Co-authored-by: taninsist <[email protected]>
Tencent · Aug 20, 2024 · d374925 · d374925
1 parent c6686e9
commit d374925
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/src/radio/constants.ts b/src/radio/constants.ts
@@ -6,7 +6,7 @@ export const RadioGroupInjectionKey: InjectionKey<{
   disabled: boolean;
   value: RadioValue;
   allowUncheck: boolean;
-  setValue: (value: RadioValue, context: { e: Event }) => void;
+  setValue: (value: RadioValue, context: { e: Event; name?: string }) => void;
 }> = Symbol('RadioGroupProvide');
 
 export const RadioButtonInjectionKey: InjectionKey<{}> = Symbol('RadioButtonProvide');
diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts
@@ -55,6 +55,6 @@ export default {
       return ['outline', 'primary-filled', 'default-filled'].includes(val);
     },
   },
-  /** 选中值发生变化时触发 */
+  /** 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 */
   onChange: Function as PropType<TdRadioGroupProps['onChange']>,
 };
diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
@@ -38,10 +38,10 @@ size | String | medium | options: small/medium/large。Typescript：`SizeEnum`
 value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | options: outline/primary-filled/default-filled | N
-onChange | Function |  | Typescript：`(value: T, context: { e: Event }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: T, context: { e: Event; name?:string }) => void`<br/> | N
 
 ### RadioGroup Events
 
 name | params | description
 -- | -- | --
-change | `(value: T, context: { e: Event })` | \-
+change | `(value: T, context: { e: Event; name?:string })` | \-
diff --git a/src/radio/radio.md b/src/radio/radio.md
@@ -38,10 +38,10 @@ size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N
-onChange | Function |  | TS 类型：`(value: T, context: { e: Event }) => void`<br/>选中值发生变化时触发 | N
+onChange | Function |  | TS 类型：`(value: T, context: { e: Event; name?:string }) => void`<br/>选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N
 
 ### RadioGroup Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: T, context: { e: Event })` | 选中值发生变化时触发
+change | `(value: T, context: { e: Event; name?:string })` | 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx
@@ -55,7 +55,7 @@ export default defineComponent({
 
       if (radioGroup) {
         const value = radioChecked.value && allowUncheck.value ? undefined : props.value;
-        radioGroup.setValue(value, { e });
+        radioGroup.setValue(value, { e, name: radioGroup.name });
       } else {
         const value = allowUncheck.value ? !radioChecked.value : true;
         setInnerChecked(value, { e });

diff --git a/src/radio/type.ts b/src/radio/type.ts
@@ -105,9 +105,9 @@ export interface TdRadioGroupProps<T = RadioValue> {
    */
   variant?: 'outline' | 'primary-filled' | 'default-filled';
   /**
-   * 选中值发生变化时触发
+   * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
    */
-  onChange?: (value: T, context: { e: Event }) => void;
+  onChange?: (value: T, context: { e: Event; name?: string }) => void;
 }
 
 export type RadioOption = string | number | RadioOptionObj;