0
254
VistasPasar el valor seleccionado de Dropdown a API en reaccionar
Hola, necesito completar la lista en el dropdown cuando se carga la página, así que pongo lo mismo en componentDidMount() .
componentDidMount() { axios.get(`http://localhost:8080/country_code`).then((res) => { const countryData = res.data; this.setState({ countryData }); }); }Estos datos deben ser parte de la lista desplegable.
<select id="dropdown"> {this.state.countryData.map((countryData) => ( <option key={countryData} value={countryData}> {countryData} </option> ))} </select>la lista se muestra como a continuación.
Mi requisito es que si el usuario selecciona cualquier valor en la dropdown list ese value debe pasarse en la API como parámetro al backend .
qué cambios debo hacer en Select u Option . Sé cómo escribir API de llamada en reactjs usando axios . Eso lo administraré. Mi código actualizado está abajo.
<select id="dropdown" onChange={this.downLoadFile(e)}> {this.state.countryData.map((countryData) => ( <option key={countryData} value={countryData}> {countryData} </option> ))} </select> downLoadFile(e) { this.setState({ selectValue: e.target.value }); alert(selectValue); } this.state = { countryData: [], selectValue: '', }; this.handleChange = this.handleChange.bind(this); this.downLoadFile = this.downLoadFile.bind(this); }No funciona. que mal estoy haciendo
Editar1:-
downLoadFile(e) { e.preventDefault(); this.setState({ selectValue: e.target.value }); alert(selectValue); } <select id="dropdown" onChange={this.downLoadFile}> {this.state.countryData.map((countryData) => ( <option key={countryData} value={countryData}> {countryData} </option> ))} </select> está dando el siguiente error. 
en constrtor tengo el siguiente código.
this.state = { selectValue: '' };2 Respuestas
Responde la pregunta0
Debe pasar la función al evento onChange. Me gusta:
<select id="dropdown" onChange={(e) => {this.downLoadFile(e)}}>o
<select id="dropdown" onChange={this.downLoadFile}>La forma en que lo hace es simplemente pasar el valor de retorno de this.downLoadFile
Actualizar:
alert(selectValue)debe ser
alert(this.state.selectValue);0
Debe obtener la API después de la actualización del estado seleccionado.
downLoadFile(e) { this.setState({ selectValue: e.target.value }, () => { fetchSomeApi(this.state.selectValue).then((res) => { updateSomewhere(res); }).catch((error) => console.error(error)); }); alert(this.state.selectValue); // < --- changes this line } this.setState tiene un segundo parámetro como devolución de llamada. Así que podrías usarlo para después del evento de actualización de estado.
Además, puede actualizar la llamada de función.
onChange={this.downloadFile)