Триггер usePosition () подключает элемент onClick - PullRequest
Новая
       19

Триггер usePosition () подключает элемент onClick

0 голосов
/ 01 ноября 2019

У меня возникают некоторые проблемы, когда я пытаюсь вызвать usePosition перехват в событии onClick.

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

Пока я пробовал несколько вариантов следующего кода, но безуспешно: 

const IndexPage = () => {
        const [geolocation, setGeolocation] = useState({});
        const [isGeolocationActive, triggerGeolocation] = useState(false);
        let currentPosition = usePosition();

        function handleGeolocation() {
            if (isGeolocationActive) {
                setGeolocation(currentPosition)
                console.log('geolocation', geolocation)
            } else triggerGeolocation(true);
        }

        return (
            <Layout>
                <Wrapper type={`list`} classNames={`wrapper pet__cards cards__list`}>
                    <Card>
                        <Image/>
                        <div onClick={() => handleGeolocation()}>Click me to share my location</div>

Я пытался установить хук useState (изначально установленв false), который должен контролировать и обрабатывать хук usePosition, если установлено значение true, но браузер все еще запрашивает разрешение на геолокацию, как только я попадаю на страницу.

Редактировать: я также пытался поставитьusePosition перехватывает другой компонент и вызывает его onClick событие. Однако в этом случае я сталкиваюсь с ошибкой некоторых правил перехвата, такой как:

"Недопустимый вызов перехвата. Хуки могут быть вызваны только внутри тела компонента функции. Это может произойти для одного изследующие причины ... "

Спасибо заранее.

1 Ответ

0 голосов
/ 01 ноября 2019

Наконец, я решил проблему, используя usePosition ловушку в другом компоненте, что-то вроде этого: 

import React from "react";
import {usePosition} from "use-position";

const Geolocation = () => {
    let currentPosition = usePosition();

    return (
        <div>
            <p>{currentPosition.latitude}</p>
        </div>
    )
};
export default Geolocation;

В то время как в моем основном компоненте я использовал useState ловушку, которая контролирует рендерингкак это: 

const IndexPage = () => {
    const [geolocation, setGeolocation] = useState('');

    function handleGeolocation() {
        setGeolocation(<Geolocation/>);
    }

    return (
        <Layout>
            <Card>
                <Image/>
                <div onClick={() => handleGeolocation()}>Click me to share my location</div>
                {geolocation}
                ...
...