მოვლენების მართვა React- ყოვლისმომცველი გზამკვლევი ღონისძიებების მართვისთვის React .js

მოვლენები მნიშვნელოვან როლს ასრულებენ ინტერაქტიული და დინამიური მომხმარებლის ინტერფეისების შექმნაში React. ამ გაკვეთილში ჩვენ განვიხილავთ, თუ როგორ გავუმკლავდეთ მოვლენებს React და ეფექტურად ვუპასუხოთ მომხმარებლის ქმედებებს.

 

მოვლენის მართვა JSX-ში

React უზრუნველყოფს სინთეზური მოვლენების სისტემას, რომელიც ახვევს მშობლიურ ბრაუზერის მოვლენებს და ახდენს მათ ნორმალიზებას სხვადასხვა ბრაუზერებში. ჩვენ შეგვიძლია მივამაგროთ მოვლენის დამმუშავებლები პირდაპირ JSX ელემენტებს ატრიბუტის გამოყენებით onEventName.

მაგალითი:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

 

მოვლენის დამმუშავებლები და ღონისძიების ობიექტები

მოვლენის გაშვებისას, React ღონისძიების ობიექტს ავტომატურად გადასცემს მოვლენის დამმუშავებლის ფუნქციას. ჩვენ შეგვიძლია ამ ობიექტზე წვდომა მოვლენის შესახებ დამატებითი ინფორმაციის მისაღებად, როგორიცაა სამიზნე ელემენტი, მაუსის კოორდინატები და ა.შ.

მაგალითი:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

 

Binding Event Handlers

ღონისძიების დამმუშავებლების რეკვიზიტების სახით გადაცემისას, მნიშვნელოვანია მათი დაკავშირება კომპონენტის მაგალითზე. ეს უზრუნველყოფს სწორი this კონტექსტის შენარჩუნებას მოვლენის გაშვებისას.

მაგალითი:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

 

მოვლენის გავრცელება და ნაგულისხმევი მოქმედებების პრევენცია

React იყენებს მოვლენის სინთეტიკურ სისტემას, რომელიც ავტომატურად ამუშავებს მოვლენის გავრცელებას. ბრაუზერის ნაგულისხმევი ქცევის თავიდან ასაცილებლად, როგორიცაა ფორმის გაგზავნა ან ბმულის ნავიგაცია, შეგვიძლია გამოვიძახოთ მეთოდი event.preventDefault().

მაგალითი:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

იმის გაგებით, თუ როგორ მართოთ მოვლენები ში React, შეგიძლიათ შექმნათ ინტერაქტიული და პასუხისმგებელი მომხმარებლის ინტერფეისები, რომლებიც შეუფერხებლად პასუხობენ მომხმარებლის ქმედებებს

 

აქ არის საერთო მოვლენების სია React

1. onClick: ეს მოვლენა ხდება ელემენტზე დაწკაპუნებისას.

მაგალითი:

<button onClick={handleClick}>Click Here</button>

2. onChange: ეს მოვლენა ხდება მაშინ, როდესაც შეიცვლება შეყვანის ელემენტის მნიშვნელობა(შეყვანა, შერჩევა, ტექსტური არეალი).

მაგალითი:

<input type="text" onChange={handleChange} />

3. onSubmit: ეს მოვლენა ხდება ფორმის გაგზავნისას. მაგალითი:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: ეს მოვლენა ხდება მაშინ, როდესაც მაუსის მაჩვენებელი შედის ელემენტში.

მაგალითი:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: ეს მოვლენა ხდება მაშინ, როდესაც მაუსის მაჩვენებელი ტოვებს ელემენტს.

მაგალითი:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: ეს მოვლენა ხდება კლავიშის დაჭერისას.

მაგალითი:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: ეს მოვლენა ხდება გასაღების გათავისუფლებისას.

მაგალითი:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: ეს მოვლენა ხდება მაშინ, როდესაც ელემენტი იღებს ფოკუსს.

მაგალითი:

<input type="text" onFocus={handleFocus} />

9. onBlur: ეს მოვლენა ხდება მაშინ, როდესაც ელემენტი კარგავს ფოკუსს.

მაგალითი:

<input type="text" onBlur={handleBlur} />

10. onScroll: ეს მოვლენა ხდება ელემენტის გადახვევისას.

მაგალითი:

<div onScroll={handleScroll}>Scrollable Content</div>

 

ეს მხოლოდ რამდენიმე მაგალითია გავრცელებული მოვლენებისა React. თქვენ შეგიძლიათ გამოიყენოთ ეს მოვლენები ან შექმნათ მორგებული ღონისძიებები თქვენი საჭიროებების შესაბამისად თქვენს React აპლიკაციაში.