OnClick tidak berfungsi dalam React JS pada mudah alih

Question

Apabila mengesahkan tandatangan (lihat video demo), onClick tidak menyalakan fungsi onSet() pada tablet/peranti mudah alih, tetapi berfungsi pada komputer. Pada tablet/mudah alih, onClick hanya berfungsi di luar butang.

Saya mahu fungsi onClick dicetuskan pada tablet/peranti mudah alih.

Video demo: https://streamable.com/lujzg0

Projek: https://hh8n2j.csb.app/ (Kotak Pasir)

DraggableSignature:

 //DraggableSignature.js
    import Boleh Seret daripada "boleh seret bertindak balas";
    import { FaCheck, FaTimes } daripada "react-icons/fa";
    import { errorColor, goodColor, primary45 } daripada "../utils/colors";

    eksport fungsi lalai DraggableSignature({ url, onEnd, onSet, onCancel }) {
      gaya const = {
        bekas: {
          kedudukan: "mutlak",
          zIndex: 100000,
          sempadan: `2px pepejal ${primary45}`,
        },
        kawalan: {
          kedudukan: "mutlak",
          kanan: 0,
          paparan: "blok sebaris",
          Warna latar belakang: primary45,
          // jejari sempadan: 4,
        },
        Butang kecil: {
          paparan: "blok sebaris",
          kursor: "penunjuk",
          pelapik: 4,
        },
      };
      kembali (
        <Draggable onStop={onEnd}>
          <div style={styles.container}>
            <div style={styles.controls}>
              <button style={styles.smallbutton} onClick={onSet}>
                <FaCheck color={goodColor} />
              </butang>
              <gaya butang={styles.smallbutton} onClick={onCancel}>
                <Warna FaTimes={errorColor} />
              </butang>
            </div>
            <img
              alt="tandatangan"
              src={url}
              lebar={200}
              style={styles.img}
              boleh diseret={false}
            />
          </div>
        </Draggable>
        
      );
    }

App.js：

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

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

                    // XY baharu berhubung dengan saiz dokumen sebenar
                    const newY =
                      (y * originalHeight) / documentRef.current.clientHeight;
                    const newX =
                      (x * originalWidth) / documentRef.current.clientWidth;

                    const pdfDoc = tunggu PDFDocument.load(pdf);

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

                    const pngImage = tunggu pdfDoc.embedPng(signatureURL);
                    const pngDims = pngImage.scale(skala * 0.3);

                    firstPage.drawImage(pngImage, {
                      x: baruX,
                      y: baruY,
                      lebar: pngDims.width,
                      ketinggian: pngDims.height,
                    });

                    if (autoDate) {
                      firstPage.drawText(
                        `Signé électroniquement le :${dayjs().format(
                          "DD/MM/YYYY à HH:mm:ss"
                        )}`,
                        {
                          x: baruX,
                          y: baruY - 10,
                          saiz: 14 * skala,
                          warna: rgb(0.074, 0.545, 0.262),
                        }
                      );
                    }

                    const pdfBytes = tunggu pdfDoc.save();
                    const blob = new Blob([newUint8Array(pdfBytes)]);

                    const URL = tunggu blobToURL(blob);
                    setPdf(URL);
                    setPosition(null);
                    setSignatureURL(null);
                  }}
                  onEnd={setPosition}
                />
              ): null}
Terima kasih
Saya menukar onClick kepada onTouchtart, saya menukar kedudukan butang, saya menggunakan perpustakaan CSS yang lain. 
            

Answer 1

Cuba tambah acara onTouchStart dan tukar butang kepada komponen div dan gayakannya kepada gaya butang