การจัดการเหตุการณ์ใน 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>

ตัวจัดการเหตุการณ์ที่มีผลผูกพัน

เมื่อส่งตัวจัดการเหตุการณ์เป็นอุปกรณ์ประกอบฉาก สิ่งสำคัญคือต้องผูกเข้ากับอินสแตนซ์ของคอมโพเนนต์ สิ่งนี้ทำให้มั่นใจได้ว่า 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 แอปพลิเคชัน ของคุณ