React IOS Safari - onClick не работает - 2020 - PullRequest
Новая
       194

React IOS Safari - onClick не работает - 2020

0 голосов
/ 25 мая 2020

Хорошо - я провел кучу исследований, но до сих пор не могу заставить эту кнопку нажать IOS safari.

Я использую response 16.13.1 - Это кнопка Reactstrap / Bootstrap в функциональная составляющая.

Вы можете увидеть кнопку и весь компонент ниже - это кнопка поиска на рендере.

Я пробовал добавить встроенный style={{ cursor: 'pointer' }} к кнопке ... все равно ничего.

Я видел, что это проблема go, но не могу понять, почему это происходит сейчас.

Он начал не работать ... затем снова начал работать ... затем он работал для некоторых айфонов, а не для других ... теперь он снова не работает. Я тоже эту кнопку толком не трогал! Так запуталась - надеюсь, кто-то может помочь.

Как видите, у меня тоже есть событие onChange, прикрепленное к входам - ​​оно запускает ту же функцию. Он просто делает так, что когда пользователь нажимает клавишу ВВОД, запускается поиск. Это не работает и в мобильном сафари. 

import React, { useState, useEffect } from 'react'
import { Card, Input, InputGroup, Button } from 'reactstrap'
import Geocode from "react-geocode";
import { genres } from '../../../uitls/QuoteCards/genres'

// set response language. Defaults to english.
Geocode.setLanguage("en");

// set response region. Its optional.
// A Geocoding request with region=es (Spain) will return the Spanish city.
Geocode.setRegion("us");

// set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_API);

export default function LocationInput(props) {
    const [ locationText, setLocationText ] = useState(props.savedLocationText)
    const [ location, setLocation ] = useState(props.savedLocation)
    const [ genre, setGenre ] = useState(props.savedGenre)
    const [ searchShowType, setSearchShowType ] = useState(props.showType)

    useEffect(() => {
    props.filterByGenre(genre)
    }, [genre])

    useEffect(() => {
        props.filterByShowType(searchShowType)
    }, [searchShowType])

    const searchByLocation = (e) => {
        if(e.target.value){
            setLocationText(e.target.value[0].toUpperCase() + e.target.value.slice(1))
        }
    }

    const handleSearch = async () => {
        try {
            const response = await Geocode.fromAddress(locationText)
            const { lat, lng } = await response.results[0].geometry.location
            props.searchLocation([lng, lat], locationText)
            setLocation([lng, lat])
        } catch (error) {
            console.log(error)
        }
    }

    const handleGenreInput = e => {
    if(e.target.value === ''){
        setGenre('Genre')
    }else {
        setGenre(e.target.value[0].toUpperCase() +  
        e.target.value.slice(1))
    }
    }

    const handleShowTypeInput = e => {
        if(e.target.value === ''){
            setSearchShowType('Show Type')
        }else{
            setSearchShowType(e.target.value)
        }
    }

    const onKeyDown = (e) => {
        if(e.keyCode === 13){
            handleSearch()
        }
    }

    return (
        <Card color="light" className="w-100 d-flex py-3 mb-1 justify-content-between align-items-center align-self-center">
            <InputGroup className='d-flex flex-row align-self-center w-100 mx-4'>
                <Input id="locationInputField" type="text" placeholder={props.savedLocationText ? props.savedLocationText : 'Address - City - State'} className="w-25 mx-1 rounded" onChange={searchByLocation} autoComplete="off" onKeyDown={onKeyDown} style={{
                    display: location ? 'none' : 'flex'
                }} />
                <Input onChange={handleGenreInput} autoComplete='off' placeholder={props.savedGenre} className=" w-25 align-self-center rounded mx-1" type="text" list="genre-list" name="genre-list" style={{
                display: location ? 'flex' : 'none'
                }} />
                    <datalist id="genre-list">
                        {props.availableGenres.map(genre => {return <option key={genre} value={genre}>{genre}</option>})}
                    </datalist>
                <Input onChange={handleShowTypeInput} autoComplete='off' placeholder={props.showType} className=" w-25 align-self-center rounded mx-1" type="text" list="showType-list" name="showType-list" style={{
                display: location ? 'flex' : 'none'
                }} />
                    <datalist id="showType-list">
                        {props.availableShowTypes.map(type => {return <option key={type} value={type}>{type}</option>})}
                    </datalist>
                <Button onClick={handleSearch}  color='dark' className='w-25 text-light align-self-center mx-1 justify-content-center' style="cursor:pointer"
                style={{
                    cursor: 'pointer',
                    display: location ? 'none': 'flex',
                }}>Search</Button>  
                <Button size='sm' color='dark' className='mx-1' onClick={() => {
                    window.location.reload()
                }} style={{
                    display: location ? 'flex': 'none'
                }}>x</Button>  
            </InputGroup>

        </Card>
    )
}

1 Ответ

0 голосов
/ 25 мая 2020

Хорошо. Это не имело ничего общего с событием onClick. Это было связано с api геокодирования. Ключ api не имеет правильных IP-адресов.

...