Optionsfeld in React

1. Optionsfelder in React
2. Benutzerdefinierte Funkkomponente

Jeder Entwickler, der jemals ein einfaches Formular in einem JavaScript-Framework erstellt hat, sollte mit Optionsfeldern vertraut sein. Sie sind der Standardtyp <input/>, der verwendet wird, wenn Benutzer zwischen mehreren Optionen wählen können. Sehen wir uns zwei Ansätze zur Implementierung von Optionsfeldern in React an.

Optionsfelder in React

Die grundlegende Implementierung von Optionsfeldern in JSX ist HTML sehr ähnlich. Schauen wir uns ein Beispiel an:

<div>
     <input type="radio" name="theme" value="DARK"/>Dark
     <input type="radio" name="theme" value="LIGHT"/>Light
</div>

Dieser JSX-Code könnte leicht mit normalem HTML verwechselt werden. Wenn wir komplexere Funktionen einführen, wie das Aktualisieren des Status nach einem onChange-Ereignis, werden die Unterschiede zwischen HTML und JSX deutlicher. Schauen wir uns dieses Beispiel an:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    return <div onChange={(e) => this.setState({theme: e.target.value})}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
  }
}

In diesem Code haben die Benutzer zwei Optionen: Dark und Light. Immer wenn sie einen von ihnen auswählen, erfassen wir den Wert im Attribut value des Eingabeelements und setzen die Eigenschaft theme des Zustands gleich. Sehen Sie sich zur besseren Demonstration das Beispiel Playcode-App an.

Beachten Sie, dass der Ereignishandler zwischen zwei geschweiften Klammern platziert wird. Es muss vermittelt werden, dass der Ausdruck zwischen geschweiften Klammern als JavaScript-Code ausgeführt werden soll.

Als Entwickler sind Sie nicht durch die Wahl eines Ereignishandlers eingeschränkt. Sie können onChange verwenden, onSubmit, wenn Ihre Optionsfelder in einem Formular platziert sind, onClick, wenn Sie Schaltflächen verwenden, um Ihre Auswahl zu übermitteln.

.map()

Wenn Sie ein Array von Optionen haben, können Sie die Methode .map() verwenden, um jede davon zu rendern. Wenn Sie beispielsweise eine Liste mit Farben haben, aus der Sie Ihren Benutzern die Auswahl ermöglichen möchten, können Sie Folgendes tun:

const arr = ["white", "black", "blue", "green"]
return (
        <div>
        {
            arr.map(color => 
                <input type="radio" name="colors" value={color} />
                   )  
                 }
        </div>
)

Geschweifte Klammern innerhalb des Elements <div> teilen React mit, dass die darin enthaltenen Ausdrücke als JavaScript-Code ausgeführt werden sollen.

Sobald der Code ausgeführt ist, erhalten Sie vier <input>-Elemente, die jeweils ein value-Attribut aus dem Array haben.

defaultChecked

Um einen Radiobutton standardmäßig zu überprüfen, können Sie das Attribut defaultChecked verwenden. Wenn wir im obigen Beispiel ein dunkles Standarddesign festlegen möchten, sieht unser Element folgendermaßen aus:

<input type="radio" name="theme" defaultChecked value="DARK"/>Dark

Benutzerdefinierte Funkkomponente

Bei der Entwicklung von React-Anwendungen sollten Sie immer versuchen, diese einfach zu halten. Wenn Sie die Optionsschaltflächenfunktion häufig verwenden, können Sie Codewiederholungen vermeiden, indem Sie eine benutzerdefinierte Optionsfeldkomponente erstellen.

const Radio = ({handler, theme}) => {
  return <div style={{height: "500px", width: "500px", backgroundColor:                                 theme.toLowerCase() === "light" ? "white" : "black"}} 
                onChange={handler}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    const handleChange = (e) => this.setState({theme: e.target.value})
    return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
  }
}

Oben haben wir eine zustandslose Funktionskomponente namens Radio erstellt. Wir können Ereignishandler als Requisite weitergeben, daher gibt es keinen wirklichen Grund für diese untergeordnete Komponente, den Zustand zu initiieren. Dumme Komponenten (die ohne Zustand) sind auch einfacher zu testen und zu warten.