• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

144
Views
Pasar 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.

ingrese la descripción de la imagen aquí

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. ingrese la descripción de la imagen aquí

en constrtor tengo el siguiente código.

 this.state = { selectValue: '' };
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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);
almost 3 years ago · Juan Pablo Isaza Report

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)
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error