fix CheckboxItem/RadioItem onChange event trigger twice, close #689

ant-design · Dec 29, 2016 · 07975d5 · 07975d5
1 parent a5230e3
commit 07975d5
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/components/checkbox/CheckboxItem.web.tsx b/components/checkbox/CheckboxItem.web.tsx
@@ -25,7 +25,8 @@ export default class CheckboxItem extends React.Component<CheckboxItemProps, any
       [className as string]: className,
     });
 
-    const otherProps = omit(this.props, ['listPrefixCls', 'disabled', 'checkboxProps']);
+    // Note: if not omit `onChange`, it will trigger twice on check listitem
+    const otherProps = omit(this.props, ['listPrefixCls', 'onChange', 'disabled', 'checkboxProps']);
     if (disabled) {
       delete otherProps.onClick;
     } else {

diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
@@ -40,7 +40,7 @@ const Test = React.createClass({
       </Flex>
       <Flex style={{ padding: 30 }}>
         <Flex.Item>
-          <AgreeItem data-seed="logId">
+          <AgreeItem data-seed="logId" onChange={(e) => console.log('checkbox', e)}>
             已阅读协议<a onClick={(e) => { e.preventDefault(); alert('打开协议'); }}>《协议链接》</a>
           </AgreeItem>
         </Flex.Item>

diff --git a/components/radio/RadioItem.web.tsx b/components/radio/RadioItem.web.tsx
@@ -25,7 +25,8 @@ export default class RadioItem extends React.Component<RadioItemProps, any> {
       [className as string]: className,
     });
 
-    const otherProps = omit(this.props, ['listPrefixCls', 'disabled', 'radioProps']);
+    // Note: if not omit `onChange`, it will trigger twice on check listitem
+    const otherProps = omit(this.props, ['listPrefixCls', 'onChange', 'disabled', 'radioProps']);
     if (disabled) {
       delete otherProps.onClick;
     } else {

diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
@@ -16,6 +16,7 @@ const Test = React.createClass({
     };
   },
   onChange(value) {
+    console.log('checkbox');
     this.setState({
       value,
     });
@@ -41,7 +42,7 @@ const Test = React.createClass({
       <Flex style={{ padding: '0.3rem' }}>
         <Flex.Item style={{ padding: '0.3rem 0', color: '#888', flex: 'none' }}>Radio 演示 (自定义样式)</Flex.Item>
         <Flex.Item>
-          <Radio className="my-radio">同意协议</Radio>
+          <Radio className="my-radio" onChange={(e) => console.log('checkbox', e)}>同意协议</Radio>
         </Flex.Item>
       </Flex>
     </div>);