React JSX: Auswahl von "selected" für ausgewählte <select> Option

Question

In einem React-Komponenten für ein -Menü muss ich das selected-Attribut auf die Option setzen, die den Anwendungsstatus widerspiegelt. In render() wird der optionState vom Staatsinhaber an die SortMenu-Komponente übergeben. Die Optionswerte werden als props aus JSON übergeben. render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( {option.label} ); }); // übergeben Sie {options} an das Select-Menü jsx Dies löst jedoch einen Syntaxfehler bei der JSX-Kompilierung aus. Dies zu tun, beseitigt den Syntaxfehler, löst aber offensichtlich das Problem nicht: var selected = (optionState === option.value) ? 'selected' : 'false'; {option.label} Ich habe auch dies versucht: var selected = (optionState === option.value) ? true : false; {option.label} Gibt es eine empfohlene Methode, um dieses Problem zu lösen?

Answer 1

Wenn Sie Stateless verwenden, dann

const IndexPage =({states, selectedState}) => {
return(

{states.map(state=> (
                      {state.name}
                      ))
                      }

)
}

Answer 2

Verwenden Sie defaultValue, um die Werte für Select vorab auszuwählen.

Answer 3

Hinzufügen von selected zu einer Option

Ein sehr häufiger Weg, den Wert eines Eingabefelds festzulegen, ist das Hinzufügen eines selected-Attributs zu einem seiner Elemente. Zum Beispiel:

const Select = ({ values, callback, selected }) => {
  return (
     callback(value)}>
      {values.map(([value, text]) => (

          {text}

      ))}

  );
}

Festlegen des Werts für das Select-Feld

Obwohl dieser Ansatz HTML sehr ähnlich ist und intuitiv erscheint, gibt es einen einfacheren Weg, das Gleiche zu erreichen. React bietet uns eine gemeinsame API zwischen , , und , in der wir value oder defaultValue (je nachdem, ob die Eingabe gesteuert wird oder nicht) verwenden können, um den Wert des Feldes festzulegen.

Bei Verwendung dieser API minimieren wir den Aufwand für das Überprüfen des ausgewählten Werts und vereinfachen den Code, um ihn bei Bedarf besser lesbar und aktualisierbar zu machen. Hier ist ein Beispiel:

const Select = ({ values, callback, selected }) => {
  return (
     callback(value)}>
      {values.map(([value, text]) => (

          {text}

      ))}

  );
}

Beachten Sie, dass die obige Implementierung defaultValue verwendet, daher wird davon ausgegangen, dass das Komponente ungesteuert ist. Sie können diese Select-Komponente in eine gesteuerte Komponente umwandeln, indem sie value anstelle von defaultValue verwenden.

Für eine genauere Erklärung der Komponente sowie Beispiele zur Verwendung können Sie die Select-Komponente überprüfen.

Referenz: selected-option

Answer 4

Ich habe eine einfache Lösung, die dem grundlegenden HTML folgt.

  Bitte auswählen
  Wert1
  Wert2

.text-hide ist eine Klasse von Bootstrap, falls du Bootstrap nicht verwendest, hier ist der Code:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Answer 5

Posting a similar answer for MULTISELECT / optgroups:

render() {
  return(

       this.props.changeHandler(e.target.value) }>
        -- Auswählen --

          {options1}

          {options2}

  )
}