Pengendalian Acara dan Pengurusan Borang Bahagian React Js

Selamat datang kembali ke siri React kami! Dalam catatan terakhir kami, kami membincangkan komponen, keadaan dan prop—konsep asas yang meletakkan asas untuk membina aplikasi React. Dalam siaran ini, kami akan meneroka pengendalian acara dan pengurusan borang dalam React. Memahami konsep ini akan membolehkan anda menjadikan aplikasi anda interaktif dan responsif kepada input pengguna.

Memahami Pengendalian Acara dalam React

Pengendalian acara dalam React adalah serupa dengan pengendalian acara dalam HTML dan JavaScript, tetapi dengan beberapa perbezaan utama. Dalam React, acara dinamakan menggunakan camelCase dan anda lulus fungsi sebagai pengendali acara.

Pengendalian Acara Asas:

Mari kita mulakan dengan contoh mudah. Begini cara anda boleh mengendalikan acara klik butang:

import React from 'react';

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

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

export default ClickButton;

Dalam contoh ini, apabila butang diklik, fungsi handleClick dilaksanakan, memaparkan amaran.

Mengendalikan Acara dengan Parameter
Jika anda perlu menghantar parameter kepada pengendali acara anda, anda boleh menggunakan fungsi anak panah:

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

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

Di sini, fungsi handleClick mengambil parameter nama dan memaparkan ucapan yang diperibadikan.

Mencegah Gelagat Lalai
Dalam borang, anda selalunya mahu menghalang tindakan lalai (seperti muat semula halaman) semasa menyerahkan. Anda boleh melakukan ini menggunakan kaedah event.preventDefault():

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

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

Pengendalian Borang dalam React

Borang ialah bahagian biasa aplikasi web dan mengurus input borang dalam React memerlukan pendekatan yang sedikit berbeza berbanding dengan borang HTML tradisional.

Contoh Komponen Terkawal:

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;

Dalam contoh ini, nilai input dikawal oleh pembolehubah keadaan inputValue. Fungsi handleChange mengemas kini keadaan apabila pengguna menaip dalam medan input.

Borang Berbilang Input
Anda boleh mengurus berbilang input dengan mudah dengan menyimpan nilainya dalam keadaan komponen sebagai objek.

Contoh Borang Berbilang Input:

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;

Dalam contoh ini, objek keadaan formData memegang nilai untuk kedua-dua nama dan input e-mel. Fungsi handleChange mengemas kini medan yang sesuai berdasarkan atribut nama input.

---

Dalam siaran ini, kami meneroka cara mengendalikan acara dan mengurus borang dalam React. Memahami konsep ini adalah penting untuk mencipta aplikasi interaktif yang bertindak balas kepada input pengguna.

Dalam siaran seterusnya, kami akan menyelami topik yang lebih lanjut. Nantikan!

Atas ialah kandungan terperinci Pengendalian Acara dan Pengurusan Borang Bahagian React Js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!