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

Hauptpunkt - Kontrollierte Komponente

Sie möchten eine "kontrollierte Komponente" einrichten. Dazu müssen Sie den Wert auf dem Element setzen und das Ändern-Ereignis behandeln, um den Wert zu aktualisieren.

https://reactjs.org/docs/forms.html#controlled-components

Beispiele

https://codepen.io/codyswartz/pen/QWqYNrY

Einfaches funktionales Komponenten-Beispiel für Auswahl

Dies beinhaltet auch einen Standardwert und macht ihn grau.

const defaultSelectValue = "Wähle eine Frucht"

const SelectExample = () => {
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      Früchte{' '}
       setSelected(e.target.value)}
      >
        {defaultSelectValue}
        Banane
        Apfel
        Orange

      Ausgewählt: {selected}

  )
}

// Verwendung

Dynamisches wiederverwendbares Beispiel mit Standardwert

Dies würde eine Sammlung von Zeichenfolgen verwenden, wobei die erste als Standardwert fungiert.

const SelectExample = ({ name, items }) => {
  const defaultSelectValue = items[0]
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      {name}{' '}
       setSelected(e.target.value)}
      >
        {items.map(item => (

            {item}

        ))}

      Ausgewählt: {selected}

  )
}

// Verwendung

Answer 2

Mit React 16.8. können wir dies mit Hooks wie im folgenden Beispiel tun

Codesandbox link

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const options = [
    "Die Ritter der Kokosnuss",
    "Das Leben des Brian",
    "Der Sinn des Lebens"
  ];
  const filmsByTati = [
    {
      id: 1,
      title: "Festtag",
      releasedYear: 1949
    },
    {
      id: 2,
      title: "Playtime",
      releasedYear: 1967
    },
    {
      id: 3,
      releasedYear: 1958,
      title: "Mon Oncle"
    }
  ];
  const [selectedOption, setSelectedOption] = useState(options[0]);
  const [selectedTatiFilm, setSelectedTatiFilm] = useState(filmsByTati[0]);
  return (

      Beispiel für Auswahl
       setSelectedOption(e.target.value)}
      >
        {options.map((option) => (

            {option}

        ))}

      Ausgewählte Option: {selectedOption}

          setSelectedTatiFilm(
            filmsByTati.find(film => (film.id == e.target.value))
          )
        }
      >
        {filmsByTati.map((film) => (

            {film.title}

        ))}

      Ausgewählte Option: {selectedTatiFilm.title}

  );
}

Answer 3

Fügen Sie einfach als erste Option Ihres Auswahlfelds hinzu:

Dies wird als Standard festgelegt und wenn Sie eine gültige Option auswählen, wird sie in Ihrem Zustand festgelegt.

Answer 4

***Html:***

var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
var selectedColor = 'Green';

ReactDOM.render(, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (

        );
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (

            {
                items.map(function (item) {
                    return {item.Name};
                })
            }
        );
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (

            {
                items.map(function (item) {
                    return {item.Name};
                })
            }
        );
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (

                {
                    items.map(function (item) {

                        if (selectedItem == item.Name)
                            return {item.Name};
                        else
                            return {item.Name};
                    })
                }
            );
        }
    });

Answer 5

Wenn Sie Objekte in einem Zustand speichern.

class Studentinformation extends Component
{
    constructor(props)
 {
   super(props);
   this.handlechange=this.handlechange.bind(this);
   this.handleSubmit=this.handleSubmit.bind(this);

   this.state={Studentinfo:{
          Name:'',
          Skill:'Java',
          Address:''
        }};
 }
 handlechange(event)
 {
   const name=event.target.name;
   const value=event.target.value;

   this.setState({ Studentinfo:
  {
    ...this.state.Studentinfo,
    [name]:[value]
  }});
 }
 handleSubmit(event)
 {
  event.preventDefault();
 }
 render(){
   return (

      Name: 

      Skills: 

          C++
          C#
          Java

                <br/>
      <input type="submit" value="Einreichen"></input>
    </form>
  </div>
   );
 }

}
</code></pre></x-turndown>