Problem beim Ziehen eines Wertes aus einem Dropdown-Menü in reagieren

Question

Dies könnte eine dumme Frage sein, aber ich bin neu zu reagieren und ich habe einige Schwierigkeiten mit meinem Dropdown-Menü. Lange Rede, kurzer Sinn, ich habe eine Liste von Orten, und ich muss in der Lage sein, den Ort auszuwählen, den der Benutzer aus dem Menü auswählt (ich plane, diese Ortsinformationen zu verwenden, um mithilfe der statischen Karten-API von Google eine Karte zu erstellen) .

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

(und dies ist der Code, die {} Optionen erzeugt):

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

locationsBase ist ein Array, das mit componentDidMount geladen in.

Also mein Problem ist das: <select value= > gibt "undefined" zurück, wenn ich es zurückgeben muss, wo auch immer der Benutzer klickt (und die Werte für Standorte sind in {Optionen} enthalten). (Auch diese Orte werden alle im Drop-down-Menü angezeigt).

Ich weiß nicht, ob das sehr klar ist, aber jede Hilfe würde sehr geschätzt werden. Vielen Dank.

Update

das ist, was die searchLocations Funktion wie folgt aussieht:

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

selectedLocation kehrt undefined in der Konsole.

und locationQuery ist auf this.value in meinem Ausgangszustand eingestellt.

Update (full-Komponente):

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

Es sieht aus wie Sie das onChange Ereignis an die searchLocations Funktion übergeben müssen.

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

greifen dann den Wert an e.target.value und übergeben, die zu Ihrem this.locationQuery Funktion.

Hoffe, das hilft!