Reactjs - Bài 8 - Event

Goal

Giới thiệu event trong Reactjs

SyntheticEvent (Event hợp nhất)

Giống như việc Reactjs wrap DOM thành các VirtualDOM thì Reactjs cũng wrap DOM event thành các SyntheticEvent dùng chung cho các Browsers.
I/F
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
void stopPropagation()
DOMEventTarget target
number timeStamp
string type
Theo đó, chúng ta có thể sử dụng các event preventDefault, stopPropagation hay target như hồi giờ.
Từ Reactjs v0.12 thì không dùng cách return false ở event handler để stop event propagation. Thay vào đó chúng ta dùng e.stopPropagation() or e.preventDefault() để thực hiện

Event handler

Trong bài trước, chúng ta đã có đụng đến event của Reactjs, ta thử nêu lại ở đây:
    var Avatar = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired
      },

      getInitialState() {
        return {
          //src: 'http://canime.files.wordpress.com/2010/05/mask-dtb.jpg'
          src: this.props.src
        };
      },
      // event handler
      onClick() {
        this.setState({src: 'http://38.media.tumblr.com/9f96b52d8fda03c77d0b620d4f12a128/tumblr_n0lvu7fSqE1sont7fo1_500.gif'});
      },

      render() {
        //var src='http://canime.files.wordpress.com/2010/05/mask-dtb.jpg';
        return (
          <div>
            <img  src={this.state.src} width={this.props.width} height={this.props.height} alt="alt" />
            <span>{this.props.name}</span>
            <button onClick={this.onClick}>So HOT!!!!</button>
          </div>
        );
      }

    });
onClick={this.onClick} : bind event click với event handler là onClick. Bên trong onClick, Reactjs bind this với Component instance cho nên chúng ta không cần phải ‘bind’ this vào event handler như kiểu: onClick(e) {...}.bind(this).

Not provided event

Đối với các event mà Reactjs support thì cứ sử dụng bình thường nhưng mà đối với event resize của window hay như các event riêng của jQuery plugin thì chúng ta:
  1. Sử dụng addEventListener trong method componentDidMount() để đăng ký event.
  2. Và dùng removeEventListener trong method componentWillUnmount để remove event.
    Tham khảo:
    http://facebook.github.io/react/tips/dom-event-listeners.html
Nhãn: