problème de tirer une valeur d'un menu déroulant en réaction

Question

cela peut être une question stupide, mais je suis nouveau à réagir et j'ai quelques difficultés avec mon menu déroulant. Pour résumer, j'ai une liste d'emplacements, et je dois pouvoir «sortir» quel que soit l'endroit que l'utilisateur choisit dans le menu (je prévois d'utiliser cette information de localisation pour générer une carte en utilisant l'API statique de Google) .

<form onSubmit={this.handleSubmit}> 
    <select className="menu" name="select" value={this.state.value} onChange={this.searchLocations}> 
     {options} 
    </select> 
    <input type="submit" value="Submit" /> 
    </form> 

(ce qui est le code qui génère {}) Options:

let options = this.state.locationsBase.map((item, index) => { 
    return(
     <option key={index + 1} value={this.state.locationsBase}>{item.name}</option> 
    ) 
    }) 

locationsBase est un tableau qui est chargé avec componentDidMount. Donc mon problème est le suivant: <select value= > retourne "indéfini", quand j'en ai besoin pour retourner n'importe quel endroit où l'utilisateur clique dessus (et les valeurs pour les emplacements sont contenues dans {options}). (également, ces emplacements apparaissent tous dans le menu déroulant).

Je ne sais pas si c'est très clair, mais toute aide serait grandement appréciée. Merci.

mise à jour

c'est ce que la fonction searchLocations ressemble:

 searchLocations(e){ 
     e.preventDefault() 
     let selectedLocation = this.locationQuery 
     console.log(selectedLocation) 
     this.setState({ 
     locationResults: this.state.selectedLocation 
    }) 

selectedLocation retours undefined dans la console.

et locationQuery est défini sur this.value dans mon état initial.

mise à jour (composante complète):

class LocationsContainer extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
    locationQuery: this.value, 
    locationResults: "", 
    locationsBase: [] 
} 


this.handleOnChange = this.handleOnChange.bind(this) 
this.searchLocations = this.searchLocations.bind(this) 
this.handleSubmit = this.handleSubmit.bind(this) 
} 

componentDidMount(){ 
this.setState({ 
    locationsBase:[ 
    {name: "Pick a branch" , address: ""}, 
    {name: "Anacostia" , address: "1800 Good Hope Rd SE"}, 
    {name: "Bellevue" , address: "115 Atlantic St SW"}, 
    {name: "Benning" , address: "3935 Benning Rd NE"}, 
    {name: "Capitol View" , address: "5001 Central Ave SE"}, 
    ] 
    },() => { 
    console.log(this.state.locationsBase) 
    }) 
} 
    handleOnChange(e) { 
    const name = e.target.value 
    this.setState({ 
    [name]: e.target.value 
}) 
    console.log("name") 
} 

searchLocations(e){ 
    e.preventDefault() 
    let selectedLocation = this.locationQuery 
    console.log(selectedLocation) 
    this.setState({ 
    locationResults: this.state.selectedLocation 
    }) 


    console.log(this.locationResults, 'something is working') 
    } 

handleSubmit(e) { 
alert('Your location is: ' + this.state.value); 
event.preventDefault(); 
} 



render(){ 
    let options = this.state.locationsBase.map((item, index) => { 
    return(
     <option key={index + 1} value={this.state.locationsBase}> 
     {item.name}</option> 
    ) 
    }) 

return (
    <div> 
    <h3>Choose your branch!</h3> 
    <form onSubmit={this.handleSubmit}> 
    <select className="menu" name="select" value={this.state.value} 
     onChange={this.searchLocations}> 
     {options} 
    </select> 
    <input type="submit" value="Submit" /> 
    </form> 



    <p>{this.state.locationResults}</p> 

    </div> 

) 
} 


} 


export default LocationsContainer 

Answer 1

Il semble que vous devez passer l'événement onChange à la fonction searchLocations.

<select onChange={(e) => this.searchLocations(e) }> 
     {options} 
    </select> 

attraper ensuite la valeur à e.target.value et passer à votre fonction que this.locationQuery.

Espérons que cela aide!