OnClick ne fonctionne pas dans React JS sur mobile

Question

Lors de la vérification de la signature (voir vidéo de démonstration), onClick ne déclenche pas la fonction onSet() sur tablette/mobile, mais fonctionne sur ordinateur. Sur tablette/mobile, onClick ne fonctionne qu'en dehors du bouton.

Je souhaite qu'onClick déclenche la fonction sur les tablettes/appareils mobiles.

Vidéo de démonstration : https://streamable.com/lujzg0

Projet : https://hh8n2j.csb.app/ (bac à sable)

DraggableSignature :

 //DraggableSignature.js
    importer Draggable depuis "react-draggable" ;
    importer { FaCheck, FaTimes } depuis "react-icons/fa" ;
    importer { errorColor, goodColor, Primary45 } depuis "../utils/colors" ;

    exporter la fonction par défaut DraggableSignature({ url, onEnd, onSet, onCancel }) {
      styles const = {
        récipient: {
          position : "absolue",
          zIndice : 100 000,
          bordure : `2px solid ${primary45}`,
        },
        contrôles: {
          position : "absolue",
          à droite : 0,
          affichage : "bloc-en-ligne",
          Couleur d'arrière-plan : primaire45,
          // borderRadius : 4,
        },
        petitBouton : {
          affichage : "bloc-en-ligne",
          curseur : "pointeur",
          rembourrage : 4,
        },
      } ;
      retour (
        
          

            

              
                
              
              
                
              
            
            
          
        
        
      );
    }
App.js：


{signatureURL ? (
                 {
                    setSignatureURL(null);
                  }}
                  onSet={async () => {
                    const { originalHeight, originalWidth } = pageDetails ;
                    échelle constante =
                      originalWidth / documentRef.current.clientWidth ;

                    const y =
                      documentRef.current.clientHeight -
                      (position.y -
                        position.offsetY +
                        64 -
                        documentRef.current.offsetTop);
                    const x =
                      position.x -
                      160 -
                      position.offsetX -
                      documentRef.current.offsetLeft;

                    // nouveau XY par rapport à la taille réelle du document
                    const nouveauY =
                      (y * originalHeight) / documentRef.current.clientHeight;
                    const nouveauX =
                      (x * originalWidth) / documentRef.current.clientWidth ;

                    const pdfDoc = attendre PDFDocument.load(pdf);

                    const pages = pdfDoc.getPages();
                    const firstPage = pages[pageNum];

                    const pngImage = wait pdfDoc.embedPng(signatureURL);
                    const pngDims = pngImage.scale(échelle * 0,3);

                    firstPage.drawImage(pngImage, {
                      x : nouveauX,
                      y : nouveauY,
                      largeur : pngDims.width,
                      hauteur : pngDims.hauteur,
                    });

                    si (date automatique) {
                      firstPage.drawText(
                        `Signé électroniquement le :${dayjs().format(
                          "JJ/MM/AAAA à HH:mm:ss"
                        )}`,
                        {
                          x : nouveauX,
                          y : nouveauY - 10,
                          taille: 14 * échelle,
                          couleur : RVB (0,074, 0,545, 0,262),
                        }
                      );
                    }

                    const pdfBytes = attendre pdfDoc.save();
                    const blob = nouveau Blob([newUint8Array(pdfBytes)]);

                    const URL = attendre blobToURL(blob);
                    setPdf(URL);
                    setPosition(null);
                    setSignatureURL(null);
                  }}
                  onEnd={setPosition}
                />
              ) : nul}≪/pré>
Merci
J'ai changé onClick en onTouchtart, j'ai changé la position du bouton, j'ai utilisé une autre bibliothèque CSS. 
            

Answer 1

Essayez d'ajouter l'événement onTouchStart et changez le bouton en composant div et stylisez-le en style de bouton