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: '' };
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);
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)