Tooltip

本实例主要介绍，如何通过父级组件将事件委托出去。

比如，页面有一个对话框，对于打开对话框和关闭对话框这样的事件，我们应该由对话框自己处理。所以我们把触发打开和关闭的事件，委托到对话框本身。

实现如下：

  <Dialog>
    <button>open dialog</button>
  </Dialog>

原理是javascript的事件冒泡机制。当单击button时，将onClick事件冒泡到Dialog组件，由Dialog组件捕获。

示例：

  import React from 'react';
  import Modal from 'antd/lib/modal'

  export default class extends React.PureComponent {

    render() {
      return (
        <div>
          页面的其他内容
          <p />
          <Dialog>
            <button>弹出一个对话框</button>
          </Dialog>
        </div>
      );
    }
  }

  class Dialog extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = { visible: false };
      this.close = this.close.bind(this);
    }

    close(e) {
      e.stopPropagation();
      this.setState({ visible: false });
    }

    render() {
      return (
        <div onClick={() => this.setState({ visible: true })}>
          {this.props.children}
          <Modal visible={this.state.visible} onCancel={this.close} onOk={this.close}>
            <div>
              this is a dialog
            </div>
          </Modal>
        </div>
      );
    }
  }

在线示例