add ref props

weui · Aug 4, 2020 · e7415c4 · e7415c4
1 parent 47c60cb
commit e7415c4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/components/button/src/button.tsx b/components/button/src/button.tsx
@@ -6,7 +6,7 @@ import {
 } from './interface';
 import classNames from '../../utils/classnames';
 
-const InternalButton = (props: ButtonProps) => {
+const InternalButton = (props: ButtonProps, ref) => {
     const {
         size,
         type,
@@ -18,7 +18,7 @@ const InternalButton = (props: ButtonProps) => {
     const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
         const { onClick } = props;
         if (onClick && typeof onClick === 'function') {
-            onClick(e)
+            onClick(e);
         }
     };
     const cls = classNames(className, {
@@ -30,10 +30,12 @@ const InternalButton = (props: ButtonProps) => {
         'weui-btn_disabled': disabled,
         'weui-btn_loading': loading
     });
+    const buttonRef = (ref as any) || React.createRef<HTMLElement>();
     return (<a
         href='#'
         onClick={handleClick}
         className={cls}
+        ref={buttonRef}
     >
         { loading ? <i className='weui-loading'/> : null }
         { children }

diff --git a/example/pages/button/index.js b/example/pages/button/index.js
@@ -5,10 +5,15 @@ import './button.less';
 
 class ButtonDemo extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.buttonRef = React.createRef();
+    }
+
     render() {
         return (
             <Page className="button" title="Button" subTitle="按钮" spacing>
-                <Button>Normal</Button>
+                <Button ref={this.buttonRef}>Normal</Button>
                 <Button disabled>Disabled</Button>
 
                 <ButtonArea>