Event handlers

React นั้นได้มีการเตรียม attributes ต่าง ๆ ที่ใช้สำหรับการจัดการกับ event ไว้เรียบร้อยแล้ว ซึ่งวิธีใช้ทั่วไปนั้นแทบจะเหมือนกับวิธีการจัดการ event ใน DOM ที่เราคุ้นเคยเลย โดยจะมีความแตกต่างกันเพียงเล็กน้อย เช่น การใช้ camelCase เป็นชื่อ attribute หรือการส่ง function แทนที่จะเป็น string เป็นต้น

const theLogoIsClicked = () => alert('Clicked');

// onClick event
<Logo onClick={ theLogoIsClicked } />

// onChange event
<input
  type='text'
  onChange={event => theInputIsChanged(event.target.value) } />

ส่วนใหญ่แล้วเรามักจะจัดการ event กันภายในคอมโพเนนท์ที่สร้าง event นั้นขึ้นมา เช่นในตัวอย่างข้างล่าง เรามี button อยู่ในคอมโพเนนท์ Switcher แล้วเราต้องการให้การคลิกที่ button ไปรันคำสั่งชื่อ _handleButtonClick ที่อยู่ในคอมโพเนนท์ Switcher

class Switcher extends React.Component {
  render() {
    return (
      <button onClick={ this._handleButtonClick }>
        click me
      </button>
    );
  }
  _handleButtonClick() {
    console.log('Button is clicked');
  }
};

โค้ดชุดนี้จะสามารถทำงานได้ตรงตามที่เราต้องการ เพราะ _handleButtonClick นั้นเป็น function และเราก็ส่ง function เข้าไปใน attribute ชื่อ onClick

แต่!! เนื่องจากตัวโค้ดไม่ได้อยู่ใน context (บริบท) เดียวกัน ส่งผลให้เวลาที่เราต้องการเรียกถึงตัวแปร this ข้างในฟังก์ชัน _handleButtonClick เพื่อเรียกถึงคอมโพเนนท์ Switcher จะทำให้เกิด Error ขึ้นมาทันที

class Switcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'React in patterns' };
  }
  render() {
    return (
      <button onClick={ this._handleButtonClick }>
        click me
      </button>
    );
  }
  _handleButtonClick() {
    console.log(`Button is clicked inside ${ this.state.name }`);
    // ไม่สามารถเรียก this.state.name ได้ เพราะหา this ไม่เจอ เนื่องจาก context ของ this ไม่ตรงกัน
    // Uncaught TypeError: Cannot read property 'state' of null
  }
};

เราสามารถแก้ได้โดยการใช้ bind

<button onClick={ this._handleButtonClick.bind(this) }>
  click me
</button>

เสียแต่ว่าฟังก์ชัน bind ของเรานั้นจะถูกเรียกซ้ำไปซ้ำมาอยู่บ่อยๆ เพราะว่าคอมโพเนนท์ button อาจถูก render ใหม่หลายๆครั้ง (หรือที่เราเรียกกันว่า re-render) วิธีที่ดีกว่านี้ก็คือการเปลี่ยนไป bind ที่ constructor ของคอมโพเนนท์นั้นทีเดียวเลย

class Switcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'React in patterns' };
    // ทำการ binding ที่นี่แทน
    this._buttonClick = this._handleButtonClick.bind(this);
  }
  render() {
    return (
      <button onClick={ this._buttonClick }>
        click me
      </button>
    );
  }
  _handleButtonClick() {
    console.log(`Button is clicked inside ${ this.state.name }`);
  }
};

Constructor ยังถือเป็นที่ที่ดีสำหรับการสร้าง handler ที่มีค่าบางอย่างพร้อมแล้วอีกด้วย ยกตัวอย่างเช่น เมื่อเรามี <form> ที่มีหลาย <input> อยู่ข้างใน แต่เราต้องการจัดการการทำงานเมื่อ <input> ถูกเปลี่ยนในฟังก์ชัน _onFieldChange(field, event) เพียงที่เดียว

class Form extends React.Component {
  constructor(props) {
    super(props);
    this._onNameChanged = this._onFieldChange.bind(this, 'name');
    this._onPasswordChanged = this._onFieldChange.bind(this, 'password');
  }
  render() {
    return (
      <form>
        <input onChange={ this._onNameChanged } />
        <input onChange={ this._onPasswordChanged } />
      </form>
    );
  }
  _onFieldChange(field, event) {
    console.log(`${ field } changed to ${ event.target.value }`);
  }
};

ข้อคิด

การจัดการ event ใน React นั้นอาจดูเหมือนไม่มีอะไรใหม่ให้ศึกษาสักเท่าไหร่ เพราะคนสร้าง React นั้นถือว่าทำไว้ดีแล้วในเรื่องของการนำสิ่งที่มีอยู่แล้วมาใช้ ในเมื่อตัวไลบรารี่เองมีการใช้ syntax ที่เหมือนกับ HTML เดิมอยู่แล้ว จึงไม่ใช่เรื่องแปลกอะไรที่จะมีการจัดการ event เหมือนใน DOM

PreviousOutput NextComposition

Last updated 6 years ago

const theLogoIsClicked = () => alert('Clicked'); // onClick event <Logo onClick={ theLogoIsClicked } /> // onChange event <input type='text' onChange={event => theInputIsChanged(event.target.value) } />

class Switcher extends React.Component { render() { return ( <button onClick={ this._handleButtonClick }> click me </button> ); } _handleButtonClick() { console.log('Button is clicked'); } };

class Switcher extends React.Component { constructor(props) { super(props); this.state = { name: 'React in patterns' }; } render() { return ( <button onClick={ this._handleButtonClick }> click me </button> ); } _handleButtonClick() { console.log(`Button is clicked inside ${ this.state.name }`); // ไม่สามารถเรียก this.state.name ได้ เพราะหา this ไม่เจอ เนื่องจาก context ของ this ไม่ตรงกัน // Uncaught TypeError: Cannot read property 'state' of null } };

class Switcher extends React.Component { constructor(props) { super(props); this.state = { name: 'React in patterns' }; // ทำการ binding ที่นี่แทน this._buttonClick = this._handleButtonClick.bind(this); } render() { return ( <button onClick={ this._buttonClick }> click me </button> ); } _handleButtonClick() { console.log(`Button is clicked inside ${ this.state.name }`); } };

class Form extends React.Component { constructor(props) { super(props); this._onNameChanged = this._onFieldChange.bind(this, 'name'); this._onPasswordChanged = this._onFieldChange.bind(this, 'password'); } render() { return ( <form> <input onChange={ this._onNameChanged } /> <input onChange={ this._onPasswordChanged } /> </form> ); } _onFieldChange(field, event) { console.log(`${ field } changed to ${ event.target.value }`); } };

ข้อคิด