Unkontrolliertes Textarea-Element

Einführung

In diesem Lab werden wir lernen, wie man ein unkontrolliertes <textarea>-Element in React erstellt. Das Ziel dieses Labs ist es, zu zeigen, wie man die defaultValue- und onChange-Eigenschaften verwendet, um den Wert des Textbereichs an eine Callback-Funktion in der übergeordneten Komponente zu übergeben. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man in React unkontrollierte Eingabefelder erstellt.

Unkontrolliertes Textarea-Element

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

Diese Funktion rendert ein <textarea>-Element, das nicht von der übergeordneten Komponente kontrolliert wird. Sie verwendet eine Callback-Funktion, um den Wert der Eingabe an die übergeordnete Komponente zu übergeben.

Um diese Funktion zu verwenden:

• Übergeben Sie die defaultValue-Eigenschaft von der übergeordneten Komponente als Initialwert des Eingabefelds.
• Verwenden Sie das onChange-Ereignis, um den onValueChange-Callback auszulösen und den neuen Wert an die übergeordnete Komponente zu senden.

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Beispielverwendung:

ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Fügen Sie hier etwas Text ein..."
    onValueChange={(val) => console.log(val)}
  />
);

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, 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 Textarea-Element" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.