React Js Part Event Handling und Formularverwaltung

Willkommen zurück zu unserer React-Reihe! In unserem letzten Beitrag haben wir Komponenten, Status und Requisiten besprochen – grundlegende Konzepte, die die Grundlage für die Erstellung von React-Anwendungen bilden. In diesem Beitrag befassen wir uns mit der Ereignisbehandlung und Formularverwaltung in React. Wenn Sie diese Konzepte verstehen, können Sie Ihre Anwendungen interaktiv gestalten und auf Benutzereingaben reagieren.

Ereignisbehandlung in React verstehen

Die Ereignisbehandlung in React ähnelt der Ereignisbehandlung in HTML und JavaScript, weist jedoch einige wesentliche Unterschiede auf. In React werden Ereignisse mithilfe von camelCase benannt und Sie übergeben eine Funktion als Ereignishandler.

Grundlegende Ereignisbehandlung:

Beginnen wir mit einem einfachen Beispiel. So können Sie mit einem Schaltflächenklick-Ereignis umgehen:

import React from 'react';

function ClickButton() {
    const handleClick = () => {
        alert("Button clicked!!!");
    };

    return <button onClick={handleClick}>Click Me</button>;
}

export default ClickButton;

In diesem Beispiel wird beim Klicken auf die Schaltfläche die handleClick-Funktion ausgeführt und eine Warnung angezeigt.

Ereignisse mit Parametern behandeln
Wenn Sie Parameter an Ihren Event-Handler übergeben müssen, können Sie eine Pfeilfunktion verwenden:

function GreetingButton({ name }) {
    const handleClick = (name) => {
        alert(`Hello, ${name}!`);
    };

    return <button onClick={() => handleClick(name)}>Greet</button>;
}

Hier übernimmt die handleClick-Funktion einen Namensparameter und zeigt eine personalisierte Begrüßung an.

Standardverhalten verhindern
In Formularen möchten Sie häufig die Standardaktion (z. B. ein Neuladen der Seite) beim Absenden verhindern. Sie können dies mit der Methode event.preventDefault() tun:

function Form() {
    const handleSubmit = (event) => {
        event.preventDefault();
        alert("Form submitted!");
    };

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

Formularhandhabung in React

Formulare sind ein häufiger Bestandteil von Webanwendungen und die Verwaltung von Formulareingaben in React erfordert einen etwas anderen Ansatz als herkömmliche HTML-Formulare.

Beispiel einer kontrollierten Komponente:

import React, { useState } from 'react';

function ControlledForm() {
    const [inputValue, setInputValue] = useState('');

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Submitted: ${inputValue}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={inputValue} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default ControlledForm;

In diesem Beispiel wird der Eingabewert durch die Zustandsvariable inputValue gesteuert. Die Funktion handleChange aktualisiert den Status immer dann, wenn der Benutzer etwas in das Eingabefeld eingibt.

Formulare mit mehreren Eingaben
Sie können mehrere Eingaben einfach verwalten, indem Sie ihre Werte im Status der Komponente als Objekt speichern.

Beispiel für ein Formular mit mehreren Eingaben:

import React, { useState } from 'react';

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

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Name: ${formData.name}, Email: ${formData.email}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="name"
                placeholder="Name"
                value={formData.name}
                onChange={handleChange}
            />
            <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default MultiInputForm;

In diesem Beispiel enthält das formData-Statusobjekt die Werte für die Namens- und E-Mail-Eingaben. Die handleChange-Funktion aktualisiert das entsprechende Feld basierend auf dem Namensattribut der Eingabe.

---

In diesem Beitrag haben wir untersucht, wie man in React mit Ereignissen umgeht und Formulare verwaltet. Das Verständnis dieser Konzepte ist entscheidend für die Erstellung interaktiver Anwendungen, die auf Benutzereingaben reagieren.

In unserem nächsten Beitrag werden wir uns mit fortgeschritteneren Themen befassen. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonReact Js Part Event Handling und Formularverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!