Event ها در ری اکت

امید کیانی 198 بازدید 1398/07/16
Event ها در ری اکت

یک رویداد عملی است که می تواند در نتیجه ی اقدام کاربر یا رویداد ایجاد شده توسط سیستم ایجاد شود.برای مثال کلیک بر روی قسمتی از صفحه ی وب،کلیک کردن بر روی یک دکمه و .. یک رویداد (event) نامیده می شود.

react سیستم مدیریت رویدادهای مربوط به خود را دارد که شباهت زیادی به کنترل رویدادها بر روی عناصر DOM دارد.

سیستم مدیریت رویداد react به عنوان رویداد مصنوعی شناخته شده است.این رویداد مصنوعی یک بسته بندی متقابل مرورگر از رویداد بومی مرورگر است.

 

کنترل رویدادها در ری اکت دارای تفاوت هایی نحوی نسبت به کنترل رویدادها در DOM است که در زیر به آن اشاره می کنیم:

۱-رویدادها در react از قانون camelCase به جای lowercase استفاده می کنند.

۲-در Jsx یک تابع به عنوان event handler به جای string پاس داده می شود.

برای مثال:

اعلان رویداد در Html

<button onclick="showMessage()">  
       Hello Laraman  
</button>

اعلان رویداد در React

<button onClick={showMessage}>  
      Hello Laraman  
</button>

۳-در react ما نمی توانیم مقدار false را برای جلوگیری از رفتار پیشفرض برگردانیم.ما باید رویداد preventDefault را به صورت صریح برای جلوگیری از رفتار پیشفرض فراخوانی کنیم.

برای مثال:

در Html برای جلوگیری از رفتار پیشفرض یک لینک از باز کردن یک پنجره جدید،ما می توانیم:

<a href="#" onclick="console.log('You had clicked a Link.'); return false">  
    Click_Me  
</a> 

در React ما می توانیم کدی شبیه کد زیر داشته باشیم:

function ActionLink() {  
    function handleClick(e) {  
        e.preventDefault();  
        console.log('You had clicked a Link.');  
    }  
    return (  
        <a href="#" onClick={handleClick}>  
              Click_Me  
        </a>  
    );  
}

در مثال بالا "e" یک رویداد مصنوعی که بر اساس مشخصات W3C تعریف شده است.

 

اکنون به مثال زیر برای استفاده event در react توجه می کنیم.

مثال:

در مثال زیرما از یک کامپوننت و از رویداد onChange استفاده می کنیم.این رویداد تابع changeText را که مقدار company name را برای ما برمی گرداند،فراخوانی می کند.

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            companyName: ''  
        };  
    }  
    changeText(event) {  
        this.setState({  
            companyName: event.target.value  
        });  
    }  
    render() {  
        return (  
            <div>  
                <h2>Simple Event Example</h2>  
                <label htmlFor="name">Enter company name: </label>  
                <input type="text" id="companyName" onChange={this.changeText.bind(this)}/>  
                <h4>You entered: { this.state.companyName }</h4>  
            </div>  
        );  
    }  
}  
export default App;

خروجی:

بعد از وارد کردن نام در textbox خروجی شما شبیه تصویر است:

 

مقالات مرتبط
حمید تیموری 645 بازدید 1397/12/04
حمید تیموری 776 بازدید 1397/10/12
امید کیانی 230 بازدید 1398/05/14
امید کیانی 111 بازدید 1398/07/15
امید کیانی 309 بازدید 1398/05/11
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید