onDoubleClick() не работает в приложении phone response js

Question

Для всех у меня проблема в моем приложении ReactJs с функцией onDoubleClick(), назначенной компоненту, на настольном ПК моя функция работает правильно, но на мобильном телефоне Android (iPhone работает нормально) с экраном в вертикальном положении функция не работает, экран в моем телефоне не распознает двойной щелчок как назначенную мне функцию, вместо этого он увеличивает или уменьшает масштаб, я хочу предотвратить такое поведение с помощью моей функции.

Ниже приведена часть моего кода, и вы можете увидеть приложение в https://estebmaister.github.io/react-calendar/ или в общедоступном репо с тем же именем.

      onDoubleClick = (event) => {
        this.setState({
          popperAnchor: Boolean(this.popperAnchor) ? null : event.currentTarget,
        });
      };
      render() {
    return (
      <td
        key={"d" + this.props.day}
        className={`calendar-day ${this.props.currentDay}`}
        onDoubleClick={this.onDoubleClick}
      >

Надеюсь, вы дадите мне подсказку, как решить эту проблему, спасибо.

Answer 1

это решение работает при объявлении компонентов с использованием функций, а не классов:

Answer 2

Вот мое решение для двойного щелчка. Обратите внимание, что onDoubleClickне работает в мобильной версии почти всех браузеров. И вам нужно использовать onTapStartи так далее. Но я хотел бы представить простую работу, которую я тестировал в Chrome, FireFox и Safari, и она отлично работает. Я сделал двойной щелчок через onClick мероприятие для img тег.

      render() => {
this.watingClick = null; // a reference to timeout function
this.lastClick = 0; // a watchdog for difference between 2 clicks
    return ( <img
             onClick={(e) => {
              if (
                this.lastClick &&
                e.timeStamp - this.lastClick < 250 &&
                this.watingClick
              ) {
                this.lastClick = 0;
                clearTimeout(this.watingClick);
                console.log("Do the steps to respond double click");
                this.watingClick = null;
              } else {
                this.lastClick = e.timeStamp;
                this.watingClick = setTimeout(function () {
                  this.watingClick = null;
                  console.log("Do the steps to respond single click");
                }, 251);
              }
            }}
            />
     );
}

Здесь я предположил, что разница во времени между двумя щелчками составляет 250 миллисекунд, вы можете увеличить ее даже до 300, однако уменьшение этого значения в большинстве браузеров не работает.