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

React macht es noch einfacher für dich. Anstatt selected für jede Option zu definieren, kannst du (und solltest) einfach value={optionsState} am Select-Tag selbst schreiben:

  Apfel
  Banane
  Preiselbeere

Für weitere Informationen siehe das React Select Tag-Dokument.

Außerdem versteht React automatisch Booleans für diesen Zweck, also kannst du einfach (Hinweis: nicht empfohlen) schreiben

{option.label}

und es wird entsprechend 'selected' ausgeben.

Answer 2

Sie könnten das tun, wovor React warnt, wenn Sie versuchen, die "selected" Eigenschaft des zu setzen:

Verwenden Sie stattdessen die defaultValue oder value props auf anstelle von selected auf zu setzen. Sie können also options.value auf das defaultValue Ihres selects setzen

Answer 3

Hier ist eine vollständige Lösung, die die beste Antwort und die darunter stehenden Kommentare einbezieht (die jemandem helfen könnten, der Schwierigkeiten hat, alles zusammenzusetzen):

UPDATE FÜR ES6 (2019) - Verwendung von Pfeilfunktionen und Objektzerlegung

im Hauptkomponenten:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // mehr mit dem item-Objekt machen, wie z.B. in die Datenbank speichern
  }

  render() {
    return (

    )
  }

}

einschlossene Komponente (die jetzt eine statische funktionale ist):

export const ReactExample = ({ name, value, handleChange }) => (

    Apfel
    Banane
    Preiselbeere

)

VORIGE ANTWORT (mit bind):

im Hauptkomponenten:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // hier einmal binden, besser als mehrmals im Render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // mehr mit item-Objekt machen, wie z.B. in die Datenbank speichern
  }

  render() {
    return (

    )
  }

}

einschlossene Komponente (die jetzt eine statische funktionale ist):

export const ReactExample = (props) => (

    Apfel
    Banane
    Preiselbeere

)

Die Hauptkomponente behält den ausgewählten Wert für Obst bei (im State), die eingeschlossene Komponente zeigt das Auswahlelement an und Aktualisierungen werden an die Hauptkomponente zurückgegeben, um deren Zustand zu aktualisieren (was dann wieder zur eingeschlossenen Komponente führt, um den ausgewählten Wert zu ändern).

Beachten Sie die Verwendung einer Namen-Prop, die es ermöglicht, eine einzige handleChange-Methode für andere Felder im gleichen Formular unabhängig von ihrem Typ zu deklarieren.

Answer 4

Ich habe ein Dropdown-Menü für einen Sprachauswahl erstellt - aber ich brauchte, dass das Dropdown-Menü die aktuelle Sprache beim Laden der Seite anzeigt. Entweder würde ich meine Ausgangssprache von einem URL-Parameter example.com?user_language=fr erhalten oder sie aus den Browsereinstellungen des Benutzers erkennen. Wenn der Benutzer dann mit dem Dropdown interagierte, würde die ausgewählte Sprache aktualisiert und das Dropdown-Menü für die Sprachauswahl würde die aktuell ausgewählte Sprache anzeigen.

Da dieser gesamte Thread Fruchtbeispiele gegeben hat, habe ich alle möglichen Fruchtinformationen für Sie.

• Zuerst beantworte ich die anfangs gestellte Frage mit einem grundlegenden React-Funktionskomponenten-Beispiel - zwei Beispiele mit und ohne Props, dann wie man die Komponente anderswo importiert.

• Als nächstes das gleiche Beispiel - jedoch aufgepeppt mit Typescript.

• Dann ein Bonus-Finale - Eine Sprachauswahl-Dropdown-Komponente unter Verwendung von Typescript.

---

Grundlegendes React (16.13.1) Funktionsbeispiel für Komponenten. Zwei Beispiele von FruitSelectDropdown, eines ohne Props und eines mit der Annahme von Props fruitDetector

import React, { useState } from 'react'

export const FruitSelectDropdown = () => {
  const [currentFruit, setCurrentFruit] = useState('oranges')

  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }

  return (

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Rote Äpfel
        Unglaubliche Orangen
        Technisch gesehen Tomaten sind Früchte
        Tollkühne Bananen

  )
}

Oder Sie können FruitSelectDropdown Props akzeptieren lassen, vielleicht haben Sie eine Funktion, die einen String ausgibt, den Sie durch den fruitDetector Prop übergeben können

import React, { useState } from 'react'

export const FruitSelectDropdown = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)

  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }

  return (

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Rote Äpfel
        Unglaubliche Orangen
        Technisch gesehen Tomaten sind Früchte
        Tollkühne Bananen

  )
}

Dann importieren Sie das FruitSelectDropdown an anderer Stelle in Ihrer App

import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App = () => {
  return (

      Eine Webseite über Früchte

        Wählen Sie Ihre Lieblingsfrucht aus

  )
}

export default App

---

FruitSelectDropdown mit Typescript

import React, { FC, useState } from 'react'

type FruitProps = {
  fruitDetector: string;
}

export const FruitSelectDropdown: FC = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)

  const changeFruit = (newFruit: string): void => {
    setCurrentFruit(newFruit)
  }

  return (

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Rote Äpfel
        Unglaubliche Orangen
        Technisch gesehen Tomaten sind Früchte
        Tollkühne Bananen

  )
}

Dann importieren Sie das FruitSelectDropdown an anderer Stelle in Ihrer App

import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App: FC = () => {
  return (

      Eine Webseite über Früchte

        Wählen Sie Ihre Lieblingsfrucht aus

  )
}

export default App

---

Bonus-Runde: Übersetzungsdropdown mit ausgewähltem aktuellen Wert:

import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'

export const LanguageSelectDropdown: FC = () => {
  const { i18n } = useTranslation()
  const i18nLanguage = i18n.language
  const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)

  const changeLanguage = (language: string): void => {
    i18n.changeLanguage(language)
    setCurrentI18nLanguage(language)
  }

  return (

       changeLanguage(event.target.value)}
        value={currentI18nLanguage}
      >
        Englisch
        Deutsch
        Spanisch
        Französisch

  )
}

---

Eine unschätzbare Ressource für React/Typescript

Answer 5

Hier ist das neueste Beispiel, wie es gemacht wird. Von React-Dokumentation, plus Auto-Bindung "Fat-Arrow" Methodensyntax.

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'Kokosnuss'};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert('Dein Lieblingsgeschmack ist: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (

          Wähle deinen Lieblingsgeschmack:

            Grapefruit
            Limette
            Kokosnuss
            Mango

    );
  }
}