Unkontrolliertes Select-Element

Einführung

In diesem Lab werden wir lernen, wie man in React ein unkontrolliertes <select>-Element mit Hilfe von Callback-Funktionen erstellt, um seinen Wert an das übergeordnete Element zu übergeben. Wir werden die selectedValue-Eigenschaft verwenden, um den Anfangswert des <select>-Elements festzulegen, und das onChange-Ereignis, um den neuen Wert an das übergeordnete Element zu senden. In diesem Lab wird auch erklärt, wie man Array.prototype.map() verwendet, um <option>-Elemente für jeden übergebenen Wert zu erstellen.

Skills Graph

Unkontrolliertes Select-Element

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Dies ist ein Element, das ein kontrolliertes <select>-Element rendert. Das Element akzeptiert ein Array von Werten und eine Callback-Funktion, um den ausgewählten Wert an sein übergeordnetes Element zu übergeben. Hier sind die Schritte, um dieses Element zu verwenden:

• Verwenden Sie die selectedValue-Eigenschaft, um den Anfangswert des <select>-Elements festzulegen.
• Verwenden Sie die onValueChange-Eigenschaft, um die Callback-Funktion anzugeben, die aufgerufen werden soll, wenn der Wert des <select>-Elements geändert wird.
• Verwenden Sie Array.prototype.map() auf dem values-Array, um für jeden übergebenen Wert ein <option>-Element zu erstellen.
• Jeder Eintrag in values sollte ein zweielementiges Array sein, wobei das erste Element der value des Elements und das zweite das angezeigte Textfeld ist.

const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
  return (
    <select
      defaultValue={selectedValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    >
      {values.map(([value, text]) => (
        <option key={value} value={value}>
          {text}
        </option>
      ))}
    </select>
  );
};

Hier ist ein Beispiel, wie dieses Element verwendet werden kann:

const choices = [
  ["grapefruit", "Grapefruit"],
  ["lime", "Lime"],
  ["coconut", "Coconut"],
  ["mango", "Mango"]
];

ReactDOM.createRoot(document.getElementById("root")).render(
  <Select
    values={choices}
    selectedValue="lime"
    onValueChange={(val) => console.log(val)}
  />
);

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Unkontrolliertes Select-Element" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.