Repository: ant-design/ant-design-mobile
Pull request #6235 (2023-07-05 06:44:02)

enhance: Checkbox add click event
和 #6195 一样，Checkbox  也有这个问题~  Radio 的已经加了

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6235.surge.sh
codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6235?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch and project coverage have no change.
> Comparison is base [(`d6b0f92`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/d6b0f92b357e661aeb6a0b5374ccdfc34b1f3543?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.75% compared to head [(`b3e0942`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6235?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.75%.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff            @@
##           feature    #6235   +/-   ##
========================================
  Coverage    90.75%   90.75%           
========================================
  Files          305      305           
  Lines         6601     6601           
  Branches      1644     1644           
========================================
  Hits          5991     5991           
  Misses         562      562           
  Partials        48       48           
```


| [Impacted Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6235?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/checkbox/checkbox.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6235?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3gudHN4) | `77.55% <ø> (ø)` | |


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6235?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index fa0f713e7..f3c7f8719 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -25,6 +25,7 @@ export type CheckboxProps = {
   id?: string
   icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode
   children?: React.ReactNode
+  onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>
 
 const defaultProps = {
@@ -110,6 +111,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((p, ref) => {
   return withNativeProps(
     props,
     <label
+      onClick={props.onClick}
       className={classNames(classPrefix, {
         [`${classPrefix}-checked`]: checked && !props.indeterminate,
         [`${classPrefix}-indeterminate`]: props.indeterminate,
diff --git a/src/components/checkbox/index.en.md b/src/components/checkbox/index.en.md
index abfc38052..4b50d679b 100644
--- a/src/components/checkbox/index.en.md
+++ b/src/components/checkbox/index.en.md
@@ -33,6 +33,7 @@ type CheckboxValue = string | number
 | id | The id of the input element, often used in conjunction with the label | `string` | - |
 | indeterminate | To set the `indeterminate` state, only responsible for style control | `boolean` | `false` |
 | onChange | Callback function when changing | `(val: boolean) => void` | - |
+| onClick | Checkbox's click event | `(event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void` | - |
 | value | The value carrying identification, used in `Group` mode | `CheckboxValue` | - |
 
 ### Ref
diff --git a/src/components/checkbox/index.zh.md b/src/components/checkbox/index.zh.md
index e4670489a..8278e1345 100644
--- a/src/components/checkbox/index.zh.md
+++ b/src/components/checkbox/index.zh.md
@@ -33,6 +33,7 @@ type CheckboxValue = string | number
 | id | `input` 元素的 `id`，常用来配合 `label` 使用 | `string` | - |
 | indeterminate | 设置 `indeterminate` 状态，只负责样式控制 | `boolean` | `false` |
 | onChange | 变化时回调函数 | `(val: boolean) => void` | - |
+| onClick | Checkbox 的点击事件 | `(event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void` | - |
 | value | 携带的标识值，用于 `Group` 模式 | `CheckboxValue` | - |
 
 ### Ref


Test patch:
diff --git a/src/components/checkbox/tests/checkbox.test.tsx b/src/components/checkbox/tests/checkbox.test.tsx
index a11534cc9..e95043850 100644
--- a/src/components/checkbox/tests/checkbox.test.tsx
+++ b/src/components/checkbox/tests/checkbox.test.tsx
@@ -28,7 +28,16 @@ describe('Checkbox', () => {
     expect(input).not.toBeChecked()
     expect(checkbox).not.toHaveClass(`${classPrefix}-checked`)
   })
+  test('Checkbox click', () => {
+    const handleClick = jest.fn()
+    const { container } = render(
+      <Checkbox onClick={handleClick}>click</Checkbox>
+    )
+    const checkbox = container.getElementsByTagName('label')[0]
 
+    fireEvent.click(checkbox)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
   test('renders with disabled', async () => {
     const { container } = render(<Checkbox disabled>Checkbox</Checkbox>)
     const input = container.querySelectorAll('input')[0]