javascript - React 事件处理与纯 JS

Question

我有一种情况，我必须在一些我无法控制的代码中渲染 React 控件。这是一个剑道 UI 网格，我需要在网格单元格中呈现自定义 React 组件。

网格是在幕后使用 jQuery 创建的。它还为父 html 元素(在表格行上)添加了一个 click 事件监听器。在我的 React 组件中，我还有一个 click 事件监听器。问题是附加到父级的处理程序首先触发。

下面的代码片段(也可以作为 fiddle 获得)演示了这个问题。为了让这个示例尽可能简单，我只使用了 div 而不是 Kendo 网格。重点是我们在父 html 元素上有一个事件处理程序，然后我们使用它的 click 处理程序将 React 组件渲染到这个父元素中，父元素优先于 React。

class Btn extends React.Component {

  constructor(props) {
    super(props);

    this.click = this.click.bind(this);
  }

  click() {
    alert('Btn');
  }

  render() {
    return (
      <span onClick={this.click}>Click me</span>
    );
  }
};

$(function() {

  $('#container').on('click', function() {
    alert('JS');
  });

  ReactDOM.render(
    <Btn />,
    document.getElementById('btn')
  );

});

<div id="container">
  <div id="btn">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

这很不幸，但据我所知，你不能告诉 React 在树的更深处绑定(bind)它的处理程序(它使用 document，然后从那里使用委托(delegate))。

要绕过它，你会做一种 uncontrolled component (从 Integrating with Other Libraries 链接)并使用 ref连接你的处理程序:

首先我们设置引用:

<span ref={span => this.span = span}>Click me</span>

然后我们使用lifecycle methods添加和删​​除我们的处理程序:

componentDidMount() {
  this.span.addEventListener("click", this.click);
}

componentWillUnmount() {
  this.span.removeEventListener("click", this.click);
}

实例:

class Btn extends React.Component {

  constructor(props) {
    super(props);

    this.click = this.click.bind(this);
  }
  
  componentDidMount() {
    this.span.addEventListener("click", this.click);
  }
  
  componentWillUnmount() {
    this.span.removeEventListener("click", this.click);
  }

  click() {
    alert('Btn');
  }

  render() {
    return (
      <span ref={span => this.span = span}>Click me</span>
    );
  }
};

$(function() {

  $('#container').on('click', function() {
    alert('JS');
  });

  ReactDOM.render(
    <Btn />,
    document.getElementById('btn')
  );

});

<div id="container">
  <div id="btn">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

(如果您需要在没有 addEventListener 的情况下支持过时的浏览器，请使用 jQuery，或者如果您不希望依赖项 this answer 具有用于 Hook 事件的小型跨浏览器功能。您d 需要编写你自己的 unhook 副本。)

您甚至可以更进一步，只连接一个单击处理程序，在您已安装组件的元素级别，并执行您自己的事件委托(delegate)(或使用 jQuery 的)以适本地分派(dispatch)。