Next.js 15: fullstack-webbappar · Lektion

Kontrollerade komponenter och tillstånd

Hantera formulärfältens värden med Reacts mönster för kontrollerade komponenter och få ett förutsägbart beteende.

Lektion 1 av 411 steg

Kontrollerade komponenter och tillstånd är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Formulär: navet för användarinteraktion

Formulär är nödvändiga i nästan alla webbapplikationer! De låter användare ange information, göra val och interagera med applikationen.

Tänk på inloggningssidor, sökfält, feedbackformulär eller till och med mängdväljare i kundvagnar – alla bygger på formulär.

Okontrollerade inmatningsfält: en snabb överblick

I vanlig HTML hanterar inmatningselement sitt eget tillstånd. När Ni skriver i ett <input> uppdateras dess värde internt.

I React kallas dessa för okontrollerade komponenter. De är enkla att använda i statiska formulär, men kan vara svåra att integrera med Reacts dynamiska UI-uppdateringar och tillståndshantering.

Möt kontrollerade komponenter

Kontrollerade komponenter är inmatningselement vars värden styrs av React-tillstånd. I stället för att DOM:en hanterar inmatningsvärdet blir React-komponentens tillstånd den enda sanningskällan.

Det ger Er full kontroll över formulärdata och gör den förutsägbar och enklare att hantera.

Kärnan: `value` och `onChange`

Två props är centrala för kontrollerade komponenter:

value: Anger inmatningsfältets aktuella visade värde. Det ska alltid komma från komponentens tillstånd.
onChange: En funktion som anropas varje gång inmatningsfältets värde ändras (till exempel när användaren skriver). Funktionen uppdaterar komponentens tillstånd.

Kontrollerat textfält i praktiken

Vi ska titta på ett grundläggande kontrollerat textfält. Vi använder useState för att lagra fältets värde och uppdaterar det med onChange.

Prova att skriva i inmatningsfältet nedan:

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <label>Your Name:</label>
      <input
        type="text"
        value={name}
        onChange={handleChange}
      />
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  );
}

Tillståndet är den enda sanningskällan

Så här fungerar ett kontrollerat inmatningsfält:

Inmatningsfältets prop value anges av React-tillståndet (till exempel name).
Användaren skriver ett tecken.
Händelsen onChange utlöses och anropar handleChange.
handleChange uppdaterar tillståndet (setName).
React renderar om komponenten.
Inmatningsfältets prop value uppdateras nu med det nya tillståndet, så att det skrivna tecknet visas.

Andra kontrollerade element

Samma mönster med value och onChange gäller för andra formulärelement som <textarea> och <select>.

För <select> anges propen value på själva taggen <select>, inte på enskilda taggar av typen <option>.

import React, { useState } from 'react';

function App() {
  const [feedback, setFeedback] = useState('');
  const [fruit, setFruit] = useState('apple');

  return (
    <div>
      <label>Your Feedback:</label>
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        rows="3"
      />
      <p>Feedback: {feedback}</p>

      <label>Favorite Fruit:</label>
      <select
        value={fruit}
        onChange={(e) => setFruit(e.target.value)}
      >
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
      <p>Selected: {fruit}</p>
    </div>
  );
}

Varför kontroll är viktigt

Att kontrollera Era formulärfält ger många fördelar:

Omedelbar validering: Validera inmatningen medan användaren skriver.
Villkorslogik: Aktivera eller inaktivera knappar baserat på inmatningens tillstånd.
Formaterad inmatning: Formatera automatiskt telefonnummer eller valutor.
Enkel åtkomst till tillståndet: Ha alltid tillgång till det aktuella värdet för alla inmatningsfält.
Förutsägbart beteende: UI:t återspeglar alltid applikationens tillstånd.

Hantera många inmatningsfält

För formulär med flera inmatningsfält kan Ni använda ett enda tillståndsobjekt och en generell onChange-hanterare. Inmatningsfältets attribut name hjälper till att identifiera vilken tillståndsegenskap som ska uppdateras.

import React, { useState } from 'react';

function App() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <label>Username:</label>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <label>Email:</label>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <p>User: {formData.username}, Email: {formData.email}</p>
    </form>
  );
}

Utmaning: kontrollerade inmatningsfält

Vilka av följande är viktiga egenskaper hos en kontrollerad komponent i React?

Besvara frågan i den interaktiva lektionen

Sammanfattning: kontrollerat och förutsägbart

Du har lärt dig om kontrollerade komponenter!

De kopplar inmatningsvärden direkt till React-state.
De använder propen value för visning och en onChange-hanterare för att uppdatera state.
Det här mönstret ger full kontroll och möjliggör funktioner som validering direkt och förutsägbart beteende.
Det gäller för elementen <input>, <textarea> och <select>.

Att behärska kontrollerade komponenter är ett viktigt steg när du bygger robusta formulär i Next.js-applikationer!

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Kontrollerade komponenter och tillstånd” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”Kontrollerade komponenter och tillstånd”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad lär jag mig i ”Kontrollerade komponenter och tillstånd”?

Hantera formulärfältens värden med Reacts mönster för kontrollerade komponenter och få ett förutsägbart beteende. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?

Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Kontrollerade komponenter och tillstånd”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?

Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15: fullstack-webbappar