Блог

Я разрабатываю плагин WordPress с помощью react, но следующее событие onClick не срабатывает на мобильных устройствах (протестировано на Android и Ios тоже)

 <button
  id={`in${this.props.wpObject.invoiceitemid}`}
  style={{
    cursor: "pointer",
  }}
  onClick={(event) =>
    this.increment(
      this.props.wpObject.eventid,
      this.props.wpObject.invoiceitemid,
      event
    )
  }
>
  {this.props.wpObject.buttontext}
</button>;
 

Он работает правильно на рабочем столе. как я мог решить эту проблему?

Эта проблема также возникает в функциональных компонентах.

Что я пробовал:

• добавление курсора: указатель
• изменение onClick на OnPointerDown
• изменение onClick на onTouchStart

Ни один из них не сработал, есть идеи?

Редактировать

Для WordPress есть 3 разных коротких кода, 2 кнопки (увеличение и уменьшение) и счетчик, они должны работать вместе: кнопки увеличения и уменьшения (в исходном вопросе выше) записываются в localstorage:

 increment(eventid, invoiceitemid, event) {
    event.preventDefault();
    const invoiceItems = JSON.parse(
      localStorage.getItem(`invoiceItems${eventid}`) ?? "null"
    );
    if (!invoiceItems[invoiceitemid]) {
      invoiceItems[invoiceitemid] = 1;
    } else {
      invoiceItems[invoiceitemid]  = 1;
    }
    localStorage.setItem(
      `invoiceItems${eventid}`,
      JSON.stringify(invoiceItems)
    );
  }
 

И есть счетчик, который должен считывать localstorage:

 const [counter, setCounter] = useState(0);

useEffect(() => {
    const getCounterData = setInterval(() => {
      let invoiceItems = JSON.parse(
        localStorage.getItem(`invoiceItems${props.eventid}`)
      );
      if (counter !== invoiceItems[props.invoiceitemid]) {
        setCounter(invoiceItems[props.invoiceitemid]);
      }
    }, 200);
    return () => {
      clearInterval(getCounterData);
    };
  });

  return (
    <span
      id={"co"   props.invoiceitemid}
      className={"counter"   props.eventid}
      style={{
        display: "flex",
        textAlign: "center",
        border: "none",
        justifyContent: "center",
        color: props.buttonTextColor,
        width: "100%",
        height: "100%",
      }}
      counter={counter}
    >
      {counter}
    </span>
  );
 

Это правильно работает на рабочем столе: