Reactjs - Bài 9 - refs và cách tương tác với Browser

Goal

Tìm hiểu về refs trong reactjs và cách tương tác với browser.

Refs and findDOMNode()

Khi chúng ta tạo các component, ‘UI’ trong reactjs, thực ra chúng ta chỉ mới làm việc với faked browser, chứ không phải browser thực sự.

Để tương tác với browser, bạn sẽ cần tham chiếu đến một DOM node. React có method React.findDOMNode(component) mà bạn có thể gọi để có được một sự tham chiếu đến DOM node của component đó.

method findDOMNode() chỉ làm việc trên những component đã được mounted. Nếu bạn dùng nó khi component chưa được mounted, chẳng hạn trong phương thức render() thì sẽ xảy ra lỗi exception.

Chúng ta thử xem ví dụ mà bạn đã làm quen trong bài trước:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>Basic Example Props</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script type="text/jsx">

    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'
        };
      },

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

    });
    var AvatarEl = <Avatar name="Foo" width={100} height={100}/>;
    var AvatarComponent = React.render(AvatarEl, document.body);
  </script>
</body>
</html>

Bạn hãy mở Developer Tool, và thử in ra AvatarComponent.refs chúng ta sẽ có Object {}, một object rỗng

Bây giờ ta thử thêm ref="avatar" vào trong thẻ như sau:

<img ref="avatar" src={this.state.src} width={this.props.width} height={this.props.height} alt="alt" />

Và bạn lại thử in AvatarComponent.refs, kết quả sẽ là Object {avatar: R…s.c…s.Constructor},

Cách tạo và dùng refs

  1. Thêm attribute ref="myRef" vào thẻ trong thẻ html được trả về từ hàm render.
  2. Bạn có thể access DOM của component trực tiếp bằng cách gọi React.findDOMNode(this.refs.myRef)

More About Refs

Về phần ‘More about refs’, trang chính của Reactjs mô tả khá rõ, phần bên dưới chỉ là phần lược dịch lại theo cách mà tôi đang hiểu.

Hãy tham khảo link More About Refs

Như những bài trước đã giới thiệu, chúng ta config và quản lý state (trạng thái) Component thông qua state và props. Mỗi khi có sự thay đổi của state và props thì chúng ta Component đó đều render lại. Việc data thay đổi thông qua state và props được gọi là React data flow. React data flow luôn đảm bảo hầu hết props mà được truyền cho children đều được output từ method render(). Cho nên việc tương tác UI phần lớn là thông qua props hay state, tuy nhiên có một vài trường hợp mà bạn cần tương tác với UI sau khi render. Ví dụ như khi bạn muốn dùng jQuery plugin trong ứng dụng của mình. Hay như bạn muốn element được focus sau khi bạn update giá trị của nó thành empty string ”.

Tham khảo Completing the Example

  • Một lưu ý nhỏ cho Reactjs newbie: Cố gắng nắm vững và thực hành nhiều với state và props trước khi dùng refs, thường thì React data flow sẽ giải quyết được hết mục đích của bạn.
Nhãn: