در زبان جاوااسکریپت به دو روش می توانیم رویدادهای خود را ایجاد و آنها را مدیریت کنیم.
- استفاده از event handler ها در تگ های html
- استفاده از event listener ها از طریق خود جاوااسکریپت
در ری اکت از event handler ها استفاده می شود. که می توانیم از طریق تگ های html آنها را فراخوانی کنیم.در ری اکت برای قرار دادن رویدادها باید حرف دوم کلمه را بزرگ بنویسیم.
برای مثال در اینجا onclick را بصورت onClick قرار می دهیم.
مثال:
|
1 |
<button onClick>Click Me!</button> |
این event handler ها می توانند دریافت کننده متدها و دستوراتی باشند که با اعمال رویداد اجرا شوند.برای اینکار پس از نوشتن نوع رویداد یک = قرار داده و درون {} دستور خود را که هم می تواند یک Arrow function یا متد باشد قرار دهیم.ما میخواهیم پس از کلیک یک پیغام در صفحه نمایش داده شود.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import {Component} from 'react'; import logo from './logo.svg'; class Card extends Component{ render() { return ( <div className="Card"> <header className="Card-header"> <div> <h3>{this.props.title}</h3> <p>{this.props.body}</p> <button onClick={()=> alert('hello amir javanmir')}>Click Me!</button> </div> </header> </div> ); } } export default Card; |
خروجی:
نمونه استفاده از متد دیگر و اجرای آن در هنگام ایجاد رویداد
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import {Component} from 'react'; import logo from './logo.svg'; class Card extends Component{ sayHello(name=""){ alert("hello amir javanmir"); } render() { return ( <div className="Card"> <header className="Card-header"> <div> <h3>{this.props.title}</h3> <p>{this.props.body}</p> <button onClick={this.sayHello}>Click Me!</button> </div> </header> </div> ); } } export default Card; |
در صورتی که متد شما ورودی ندارد در هنگام فراخوانی نیازی نیست پرانتز آن را قرار دهید.در صورت قرار دادن پرانتز بدون کلیک کردن هم دستور اجرا می شود.
برای اجرای متد با پارامتر آن را در حالت arrow function اجرا کنید.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import {Component} from 'react'; import logo from './logo.svg'; class Card extends Component{ sayHello(name=""){ alert(`hello ${name}`); } render() { return ( <div className="Card"> <header className="Card-header"> <div> <h3>{this.props.title}</h3> <p>{this.props.body}</p> <button onClick={()=>this.sayHello("amir javanmir")}>Click Me!</button> </div> </header> </div> ); } } export default Card; |
دریافت اطلاعات رویداد با استفاده از ارسال پارامتر برای arrow function
در صورتی که بخواهیم اطلاعات خود رویداد را دریافت کنیم می توانیم یک پارامتر را بعنوان ورودی به تابع arrow function ارسال کنیم.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import {Component} from 'react'; import logo from './logo.svg'; class Card extends Component{ sayHello(event){ console.log(event); } render() { return ( <div className="Card"> <header className="Card-header"> <div> <h3>{this.props.title}</h3> <p>{this.props.body}</p> <button onClick={(e)=>this.sayHello(e)}>Click Me!</button> </div> </header> </div> ); } } export default Card; //SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: button, …} |
