Necesito detectar si tipeo en un react-select búsqueda. De acuerdo con la documentación oficial , primero que nada tengo que pasar isMulti prop para seleccionar más de una opción.
El onChange incorporado real detecta cambios solo cuando selecciono una opción, y no cuando escribo en el cuadro. Lo necesito porque tengo que llamar a una API si escribo en ese cuadro de entrada.
Aquí está mi selección:
<Select options={myOptions} isMulti loadingIndicator={true} styles={selectStyle} onChange={(e) => console.log(`e`, e)} /> En realidad onChange me registra una matriz con las opciones seleccionadas. ¿Cómo puedo cambiar eso, por ejemplo, si escribo "fo" y luego tengo "fo"? ¿Hay alguna opción o forma de hacerlo?
Sí, tenemos la opción de selección asíncrona para cargar datos desde la API cuando el usuario escribe. A continuación, he adjuntado el código para usted documentado en su sitio web oficial. https://react-select.com/home#async
import { useState } from "react"; import AsyncSelect from "react-select/async"; const colourOptions = [ { label: "Oranage", value: "orange" }, { label: "Yellow", value: "yellow" }, { label: "Blue", value: "blue" } ]; const SelectOption = () => { const [inputValue, setInputValue] = useState(""); const filterColors = (inputValue) => { return colourOptions.filter((i) => i.label.toLowerCase().includes(inputValue.toLowerCase()) ); }; const promiseOptions = (inputValue, callback) => { setTimeout(() => { callback(filterColors(inputValue)); }, 1000); }; const handleChange = (newValue) => { const inputValue = newValue.replace(/\W/g, ""); setInputValue(inputValue); return inputValue; }; return ( <AsyncSelect cacheOptions defaultOptions loadOptions={promiseOptions} onInputChange={handleChange} /> ); }; export default SelectOption;No hay accesorios
onKeyDowndisponibles en la documentación dereact-select.
Lo que puedes hacer es algo como lo siguiente:
class App extends Component { onKeyUp = () => { console.log("I see"); // Your rest code }; render() { return ( <div onKeyUp={this.onKeyUp} className="App"> <Select options={myOptions} isMulti loadingIndicator={true} styles={selectStyle} onChange={(e) => console.log(`e`, e)} /> </div> ); } }