0
179
Vistaslista desplegable de búsqueda en reaccionar
Tengo una lista desplegable que se puede buscar en reaccionar. para eso he usado VirtualizedSelect , el problema es onChange no funciona.
import VirtualizedSelect from 'react-virtualized-select' import "react-virtualized-select/styles.css"; import 'react-virtualized/styles.css' <VirtualizedSelect id="sponsor" name="sponsor" defaultValue="Please" className="form-control" placeholder="Sponsor" options= { active && result.map((sponsor:Sponsor,index:number)=> ({label: sponsor.name, value: sponsor.name}) )} onChange={ (e:any)=>{printValue(e)}} }> </VirtualizedSelect> dentro de printValue estoy imprimiendo alert(e.target.value ) y está imprimiendo undefined .
const printValue=(e:any)=>{ alert("value is"+e.target.value); } también a partir de ahora la list viene como a continuación.
Quiero que haga como a continuación. Quiero decir que quiero agregar "Por favor seleccione el patrocinador" 
¿Puedes ayudarme con lo mismo? si estoy imprimiendo console.log(e.target.value) dentro del método. está arrojando debajo del error.
Edit1: - viene como a continuación.
1 Respuestas
Responde la pregunta0
Así es como podría abordar esto:
import React, { useState } from "react" import VirtualizedSelect from 'react-virtualized-select' function App() { const options = [ { label: "One", value: 1 }, { label: "Two", value: 2 }, { label: "Three", value: 3 }, { label: "Four", value: 4 }, { label: "Five", value: 5 }, { label: "Six", value: 6 } ] const [item, setItem] = useState(null) return ( <> <VirtualizedSelect options={options} onChange={(value) => setItem(value)} value={item} /> </> ) } export default App;Edición 1:
Importe los estilos predeterminados que son estas líneas en su componente
import 'react-select/dist/react-select.css' import 'react-virtualized/styles.css' import 'react-virtualized-select/styles.css'Edición 2: reaccionar-seleccionar v2 hacia arriba no proporciona el archivo css debido a varias razones. Una de las formas es agregar el archivo css manualmente copiando y pegando lo que sugerí.
Prueba de captura de pantalla: 