React Js 部分事件處理與表單管理

歡迎回到我們的 React 系列！在上一篇文章中，我們討論了元件、狀態和屬性——為建立 React 應用程式奠定基礎的基本概念。在這篇文章中，我們將探討 React 中的事件處理和表單管理。了解這些概念將使您能夠使您的應用程式具有互動性並響應用戶輸入。

了解 React 中的事件處理

React 中的事件處理類似於 HTML 和 JavaScript 中的事件處理，但有一些關鍵差異。在 React 中，事件使用駝峰命名法命名，並且您傳遞一個函數作為事件處理程序。

基本事件處理：

讓我們從一個簡單的例子開始。以下是處理按鈕點選事件的方法：

import React from 'react';

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

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

export default ClickButton;

在此範例中，按一下按鈕時，將執行handleClick 函數，並顯示警報。

使用參數處理事件
如果需要將參數傳遞給事件處理程序，可以使用箭頭函數：

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

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

這裡，handleClick 函數接受一個名稱參數並顯示個人化問候語。

防止預設行為
在表單中，您通常希望在提交時阻止預設操作（例如頁面重新載入）。您可以使用 event.preventDefault() 方法來執行此操作：

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

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

React 中的表單處理

表單是 Web 應用程式的常見部分，與傳統 HTML 表單相比，在 React 中管理表單輸入需要稍微不同的方法。

受控組件範例：

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;

在此範例中，輸入值由 inputValue 狀態變數控制。每當使用者在輸入欄位中鍵入內容時，handleChange 函數就會更新狀態。

多重輸入表單
您可以透過將多個輸入的值作為物件儲存在元件的狀態中來輕鬆管理多個輸入。

多重輸入表單範例：

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;

在此範例中，formData 狀態物件保存姓名和電子郵件輸入的值。 handleChange 函數根據輸入的名稱屬性更新對應的欄位。

---

在這篇文章中，我們探討如何在 React 中處理事件和管理表單。理解這些概念對於創建響應用戶輸入的互動式應用程式至關重要。

在下一篇文章中，我們將深入探討更高級的主題。請繼續關注！

以上是React Js 部分事件處理與表單管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！