Eingabefeld zeigt keinen ausgewählten Wert an

Question

Wenn ich ein Land auswähle, wird die Eingabe nicht aktualisiert, um sie anzuzeigen. Ich kann den Wert der Konsole loggen, damit ich weiß, dass onChange ihn aktualisiert.

this.state = { 
     countrySelection: "",  
     countryListFormatted: [ 
      {Value: "France", label: "France"}, 
      {Value: "Germany", label: "Germany"}, 
      {Value: "Greece", label: "Greece"}, 
      {Value: "Turkey", label: "Turkey"}, 
      {Value: "Italy", label: "Italy"}, 
      {Value: "Netherlands", label: "Netherlands"}, 
      {Value: "Portugal", label: "Portugal"}, 
      {Value: "Spain", label: "Spain"}, 
      {Value: "Switzerland", label: "Switzerland"}, 
      {Value: "United Kingdom", label: "United Kingdom"}, 
      {Value: "United States of America", label: "United States of America"} 
     } 

Ich bin nicht die ganze Seite zeigt, aber unten ist mein onChange Handler:

onSelectCountry(val){ 
    this.setState({countrySelection: val.Value}) 
    console.log(val) 
} 

Und die Aktion Komponente wählen:

<Select 
      searchable={true} 
      style={{border: "none", boxShadow: "none", highlight: "none"}} 
      placeholder="Country" 
      name="country-selection" 
      value={this.state.countrySelection} 
      options={this.state.countryListFormatted} 
      onChange={this.onSelectCountry.bind(this)} 
    /> 

Die Drop-Down-Optionen zur Verfügung hat und ich kann sie auswählen und das Konsolenprotokoll wird den Wert protokollieren, den ich auswähle. Ich habe einen anderen Konsolenprotokollierungsstatus, und das protokolliert den richtigen Status. Ich weiß nur nicht, warum die Eingabe die von mir gewählte Option nicht anzeigt.

Answer 1

Konnten Sie die Antwort auf diese auf einem github issue:

Die Komponente wird nun „kontrolliert“, was bedeutet, dass Sie Wert als Stütze passieren müssen und immer das Ereignis onChange zu behandeln. Siehe https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 2

Ich denke, dass Ihr Tippfehler ist, wenn Sie Zustand in onSelectCountry gesetzt sollte es this.setState({countrySelection: val.value}) (Wert mit kleinen v)