Событие onClick для элемента в состоянии наведения мобильного устройства все еще применяется - PullRequest
Новая
       52

Событие onClick для элемента в состоянии наведения мобильного устройства все еще применяется

1 голос
/ 26 апреля 2019

Кажется, я не могу найти никого с такой же проблемой в Интернете с помощью React, если я не искал что-то не то?

У меня есть кнопка (тег привязки) с onClickсобытие.Когда запускается событие onClick, оно вызывает функцию loadMore(), которая выполняет вызов API и обновляет некоторое состояние.

Однако на мобильном устройстве (не на мобильном устройстве с разрешением на рабочем столе!), Когда я нажимаю кнопку,событие onClick работает и возвращает ожидаемое; однако применяет состояние hover к кнопке.Для состояния наведения кнопки у меня применен цвет фона

Состояние наведения будет сохраняться до тех пор, пока я не щелкну где-нибудь еще на экране.Так что цвет фона остается неизменным, пока я не щелкаю.

Теперь это не совсем желательно.Почему это происходит, и как я это предотвратил?

Вот мой Button Компонент 

const Button = props => {
  const buttonDisabledClass = props.disabled ? "Button--disabled " : "";
  const hiddenClass = props.hidden ? "Button--hidden " : "";
  const modifierClass = props.modifier ? props.modifier : "";

  return (
    <>
      <a
        onClick={!props.disabled ? props.onClick : undefined}
        className={
          "Button " + buttonDisabledClass + hiddenClass + modifierClass
        }
      >
        {props.children}
        {props.buttonText ? (
          <span
            className={`Button-text ${
              props.buttonMobileText ? "Button-desktopText" : ""
            }`}
          >
            {props.buttonText}
          </span>
        ) : null}
        {props.buttonMobileText ? (
          <span className="Button-mobileText">{props.buttonMobileText}</span>
        ) : null}
      </a>
    </>
  );
};

Вот родительский компонент

Родительский компонент импортируетButton компонент и имеет функцию, которая делает запрос API (просто смоделируйте здесь в качестве примера) 

function App() {
  const [number, setNumber] = useState(0);

  /*simulate http request*/
  const ttl = 500;
  const loadMore = () => {
    const timeout = setTimeout(() => {
      setNumber(number + 1);
    }, ttl);
    return () => {
      clearTimeout(timeout);
    };
  };

  return (
    <div className="App">
      {number}
      <Button
        key={"loadMoreBtn"}
        modifier="Button--loadMore Button--Inline"
        onClick={() => loadMore()}
      >
        Load More
      </Button>
    </div>
  );
}

Итак, как я могу сделать так, чтобы щелчок на мобильном устройстве не регистрировалсяhover, но все еще ли hover работает на настольном устройстве, как оно есть в настоящее время?

У меня есть CODESANDBOX , если вы хотите протестировать его для себя

Вот ссылка для тестирования на мобильном устройстве.

По умолчанию кнопка оранжевая, а при наведении - серая.На мобильном телефоне это происходит при нажатии ... enter image description here

Любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 26 апреля 2019

Вы можете переопределить эффект наведения на мобильном устройстве, используя медиа-запрос в вашем CSS: 

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  .Button:hover {
    background-color: #ee4900 !important;
  }
}

или 

@media (hover: none) {
  .Button:hover {
    background-color: #ee4900 !important;
  }
}
...