Question 1

Was ist eine Controlled Component in React?

Accepted Answer

Eine Controlled Component ist ein Formularelement, dessen Wert über die value-Prop und einen onChange-Handler vom React-State verwaltet wird. Das bedeutet, dass React zur einzigen Quelle der Wahrheit für diese Daten wird. Im Gegensatz zu Uncontrolled Components, bei denen das DOM seinen eigenen Wert verwaltet, bieten Controlled Components volle Kontrolle über Formulardaten und erleichtern die Echtzeit-Validierung.

Question 2

Wie erstellt man ein Controlled Input in React?

Accepted Answer

Ein Controlled Input benötigt zwei wesentliche Elemente: die value-Prop, die an den React-State gebunden ist, und einen onChange-Handler, um diesen State zu aktualisieren. Ohne onChange wäre das Input schreibgeschützt, da React jede Änderung verhindern würde. Dieser Ansatz stellt sicher, dass der React-State mit dem angezeigten Input-Wert synchron bleibt und ermöglicht sofortige Validierung oder Datentransformation.

Question 3

Was ist der Unterschied zwischen einer Controlled Component und einer Uncontrolled Component?

Accepted Answer

Der grundlegende Unterschied liegt in der Quelle der Wahrheit für die Daten. Eine Controlled Component speichert ihren Wert im React-State (einzige Quelle der Wahrheit), während eine Uncontrolled Component das DOM seinen eigenen Wert verwalten lässt, der über eine ref zugänglich ist. Controlled Components bieten mehr Kontrolle und erleichtern die Echtzeit-Validierung, aber Uncontrolled Components können für einfache Formulare ohne komplexe Validierung einfacher sein.

Formulare & Controlled Components

Was ist eine Controlled Component in React?

Antwort

Wie erstellt man ein Controlled Input in React?

Antwort

Was ist der Unterschied zwischen einer Controlled Component und einer Uncontrolled Component?

Antwort

Wie verwaltet man mehrere Controlled Inputs im selben Formular?

Wie erstellt man eine Controlled Checkbox in React?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview