React IOS Safari-onClick不起作用-2020

Question

好吧-我已经做了很多研究，但仍然无法通过此按钮单击IOS Safari。

我正在使用react 16.13.1-它是功能组件中的Reactstrap / Bootstrap按钮。

您可以在下面看到按钮和整个组件-它是渲染中的搜索按钮。

我已经尝试将内联style={{ cursor: 'pointer' }}添加到按钮中……还是什么也没有。

我看到这是几年前的问题，但无法弄清楚为什么现在发生。

它开始不起作用...然后又开始起作用..然后它适用于某些iphone，而不适用于其他iphone ...现在它根本不再起作用。我也没有真正触摸此按钮！如此困惑-希望有人可以提供帮助。

您还可以看到我也有一个onChange事件，它附加到输入-触发相同的功能。它只是简单地做到了，当用户按下Enter键时，搜索就会触发。在移动safari中无法正常使用。

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>
    )
}

Answer 1

嗯。它与onClick事件无关。它与地理编码api有关。 api密钥没有正确的IP地址。