Actualmente estoy usando reaccionar, componentes con estilo, iconos de reacción
Estoy haciendo un componente desplegable de selección.
Quiero tomar un registro de la consola cuando se hace clic en los elementos, pero no funciona.
Quizás debido a la representación condicional, el elemento desaparece.
antes de que se llame al clic. ¿Hay una mejor manera?
¿Alguien puede ayudar?
A continuación se muestra el código que escribí.
import React, { useState } from 'react'; import { AiFillCaretDown } from 'react-icons/ai'; import styled from 'styled-components'; import Input from './Input'; const Autocomplete = styled.div` position: relative; display: flex; .icon { margin-left: -28px; align-self: center; width: 24px; height: 24px; } `; const Dropdown = styled.div` position: absolute; top: 100%; left: 0; width: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); background-color: #fff; `; const SearchResults = styled.ul` margin: 0; padding: 0; list-style: none; `; const Items = styled.li` padding: 0.75rem 1rem; cursor: pointer; `; const OPTION = [ 'Inside Out', 'John Wick', 'Jurassic World', 'The Lord of the Rings', 'Pacific Rim', 'Pirates of the Caribbean', 'Planet of the Apes', 'Saw', 'Sicario', 'Zombies', ]; const SerachSelect = () => { const [results, setResults] = useState(OPTION); const [dropdownVisible, setDropdownVisible] = useState(false); const filterMethod = (options, query) => { return options.filter((option) => option.toLowerCase().includes(query.toLowerCase()) ); }; const searchList = (event) => { const findResults = filterMethod(OPTION, event.target.value); setResults(findResults); }; const showDropdown = () => { setDropdownVisible(true); }; const hideDropdown = () => { setDropdownVisible(false); }; return ( <Autocomplete> <input type="text" placeholder="Type to search list" onChange={searchList} onFocus={() => showDropdown()} onBlur={() => hideDropdown()} /> <AiFillCaretDown className="icon" size={20} /> {dropdownVisible && ( <Dropdown> <SearchResults> {results.map((result) => ( <Items key={result} onClick={() => { //help me... console.log(result); }} > {result} </Items> ))} </SearchResults> </Dropdown> )} </Autocomplete> ); }; export default SerachSelect;Puede ocultar el menú desplegable después de hacer clic en un elemento en lugar de usar el controlador onBlur . aquí hay una solución
return ( <Autocomplete> <input type="text" placeholder="Type to search list" onChange={searchList} onFocus={() => showDropdown()} /> <AiFillCaretDown className="icon" size={20} /> {dropdownVisible && ( <Dropdown> <SearchResults> {results.map((result) => ( <Items key={result} onClick={() => { //help me... console.log(result); hideDropdown(); }} > {result} </Items> ))} </SearchResults> </Dropdown> )} </Autocomplete> );Su componente Items debería tomar onClick prop como este;
const Items = (props) => { return <div onClick={props.onClick}>{props.children}</div>; }