feat: 修复 react 中 click 事件重复触发的问题

hellof2e · Nov 2, 2022 · 3480cd0 · 3480cd0
1 parent 63c7c5c
commit 3480cd0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/quark-reactify/src/index.ts b/packages/quark-reactify/src/index.ts
@@ -23,13 +23,17 @@
      }
 
      update() {
-       this.clearEventHandlers();
+       this.clearEventHandlers(); 
        if (!this.ref.current) return;
        //@ts-ignore
        Object.entries(this.props).forEach(([prop, val]) => {
          if (typeof val === 'function') {
            if (prop.match(/^on[A-Za-z]/)) {
-             return this.setEvent(prop.substr(2).toLowerCase(), val);
+             // 需要过滤掉原生支持的 click 事件
+             const eventName = prop.substr(2).toLowerCase();
+             if (eventName !== 'click') {
+                return this.setEvent(eventName, val);
+             }
            }
          }
          return true;

diff --git a/packages/quark/src/navbar/doc-react.en-US.md b/packages/quark/src/navbar/doc-react.en-US.md
@@ -73,8 +73,8 @@ export default () => {
     <Navbar
       right="share"
       title="Click left or right"
-      onLeftclick={onLeftClick}
-      onRightclick={onRightClick}
+      onLeftClick={onLeftClick}
+      onRightClick={onRightClick}
       onClose={close}
     />
   )

diff --git a/packages/quark/src/navbar/style.css b/packages/quark/src/navbar/style.css
@@ -1,12 +1,13 @@
 :host {
-  display: block;
   font-size: 18px;
   height: 44px;
   position: relative;
   display: flex;
   align-items: center;
   color: quark-textBaseColor;
   text-align: center;
+  width: 100%;
+  background-color: white;
 }
 
 :host([safearea]) {