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 }`);
  }
};

Facebook (ผู้สร้าง React) เองก็ยัง แนะนำ เทคนิคเดียวกันนี้เวลาที่ต้องจัดการกับฟังก์ชันที่ใช้ context เดียวกันภายในคอมโพเนนท์

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