Выпадающий div не регистрируется при нажатии - eventListener и onClick ничего не делают - PullRequest
Новая
       96

Выпадающий div не регистрируется при нажатии - eventListener и onClick ничего не делают

0 голосов
/ 16 июня 2020

Я делаю простое приложение для поиска в компоненте функции React, выпадающее меню работает, и все выглядит нормально, но когда я пытаюсь обработать результаты, по которым щелкают, щелчки не регистрируются.

Я использовал JavaScript, чтобы изменить опору отображения выпадающего div (когда поисковый ввод находится в фокусе) на блокировку со скрытого, а также изменил его высоту с помощью JS. Я не уверен, связано ли это с этим.

Обработчик событий в useEffect ничего не показывает, и функция handleClick также ничего не делает. Пожалуйста, я понятия не имею. 

useEffect(() => {
        document.addEventListener('click', handleClick);
    });


function handleClick(e) {
        console.log('handleClick fired');
        console.log(e.target);
    }

function renderSearchA() {
        return (
            <div>
                <h1>COMBATANT A</h1>

                <input
                    autoFocus
                    id="searchA"
                    type="text"
                    ref={inputA}
                    onKeyUp={handleChangeA}
                    onFocus={showResultsA}
                    onBlur={hideResults}
                    placeholder={setPlaceHolder()}
                />
                <div id="results-div" ref={resultsDivA} className="results-shown">
                    <ul>{resultsA()}</ul>
                </div>
            </div>
        );
    }

function showResultsA() {
        if (resultsDivA.current != undefined) {
            resultsDivA.current.style = 'display: block;';
            resultsDivA.current.style = 'height: 0px;';
            resultsDivA.current.style =
                'box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7)';
            window.setTimeout(() => {
                // resultsDiv.current.classList.remove('results');
                resultsDivA.current.classList.add('results-shown');
            }, 200);
        }
    }

function resultsMap(x) {
        if (x === 'A' && searchResults != undefined) {
            return searchResults.map((a, b) => {
                console.log(a);
                return (
                    <li key={a[2]}>
                        <button onClick="handleClick()" className="hero">
                            {a[0]}
                        </button>
                    </li>
                );
            });
        }
    }

return (
        <SearchDiv>
            <div className="search-a">
                {renderSearchA()}
                <HeroInfo name="a" id="heroA" />
            </div>

            <div className="search-b">
                {renderSearchB()}
                <HeroInfo name="b" id="heroB" className="heroB" />
            </div>
        </SearchDiv>
    );

А CSS выглядит так: 


#searchA {
        /* input */
        width: ${width};
        padding: 0.5rem;
        border-radius: 8px 8px 8px 8px;

        &:focus {
            border-radius: 8px 8px 0 0;
            box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7);
        }
    }

    #results-div {

        box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7);
    }

    .results {
        /* div */
        border-radius: 0 0 8px 8px;
        height: 0px;
        display: none;
        width: 0px;
    }

    .results-shown {
        height: auto;
        margin: auto;
        width: ${width};
        display: block;
        /* display: block; */

    }
...