React Js Part 이벤트 처리 및 양식 관리-JS 튜토리얼-php.cn

React Js Part 이벤트 처리 및 양식 관리

Linda Hamilton

풀어 주다： 2024-10-31 01:34:03

원래의

372명이 탐색했습니다.

React Js Part Event Handling and Form Management

React 시리즈에 다시 오신 것을 환영합니다! 지난 게시물에서 우리는 React 애플리케이션을 구축하기 위한 기초를 마련하는 기본 개념인 구성 요소, 상태 및 소품에 대해 논의했습니다. 이번 포스팅에서는 React의 이벤트 처리와 양식 관리에 대해 살펴보겠습니다. 이러한 개념을 이해하면 애플리케이션을 대화형으로 만들고 사용자 입력에 반응하도록 만들 수 있습니다.

React의 이벤트 처리 이해

React의 이벤트 처리는 HTML 및 JavaScript의 이벤트 처리와 유사하지만 몇 가지 주요 차이점이 있습니다. React에서는 CamelCase를 사용하여 이벤트 이름을 지정하고 함수를 이벤트 핸들러로 전달합니다.

기본 이벤트 처리:

간단한 예부터 시작해 보겠습니다. 버튼 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

import React from 'react';

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

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

export default ClickButton;

로그인 후 복사

이 예에서는 버튼을 클릭하면 handlerClick 함수가 실행되어 경고가 표시됩니다.

매개변수를 사용하여 이벤트 처리
이벤트 핸들러에 매개변수를 전달해야 하는 경우 화살표 함수를 사용할 수 있습니다.

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

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

로그인 후 복사

여기서 handlerClick 함수는 name 매개변수를 사용하여 맞춤 인사말을 표시합니다.

기본 동작 방지
양식에서는 제출 시 기본 작업(예: 페이지 새로 고침)을 방지하려는 경우가 많습니다. event.preventDefault() 메소드를 사용하여 이를 수행할 수 있습니다:

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

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

로그인 후 복사

React의 양식 처리

양식은 웹 애플리케이션의 일반적인 부분이며 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 상태 변수에 의해 제어됩니다. handlerChange 함수는 사용자가 입력 필드에 입력할 때마다 상태를 업데이트합니다.

다중 입력 양식
여러 입력의 값을 구성 요소 상태에 객체로 저장하여 쉽게 관리할 수 있습니다.

다중 입력 형식의 예:

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 상태 개체는 이름과 이메일 입력에 대한 값을 모두 보유합니다. handlerChange 함수는 입력의 이름 속성을 기반으로 적절한 필드를 업데이트합니다.

이번 게시물에서는 React에서 이벤트를 처리하고 양식을 관리하는 방법을 살펴보았습니다. 사용자 입력에 응답하는 대화형 애플리케이션을 만들려면 이러한 개념을 이해하는 것이 중요합니다.

다음 게시물에서는 좀 더 고급 주제를 다루겠습니다. 계속 지켜봐주세요!

위 내용은 React Js Part 이벤트 처리 및 양식 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!