React Js Part イベント処理とフォーム管理

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 アプリケーションの一般的な部分であり、React でフォーム入力を管理するには、従来の HTML フォームと比較してわずかに異なるアプローチが必要です。

制御対象コンポーネントの例:

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 関数は、入力の name 属性に基づいて適切なフィールドを更新します。

---

この投稿では、React でイベントを処理し、フォームを管理する方法を検討しました。ユーザー入力に応答する対話型アプリケーションを作成するには、これらの概念を理解することが重要です。

次回の投稿では、より高度なトピックについて掘り下げていきます。乞うご期待!

以上がReact Js Part イベント処理とフォーム管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。