如何在点击处理程序中获取与event.target元素对应的React组件实例？

Question

这是我的React组件类

class TestInstance extends React.Component {
    onClick(e) {
        //When the user clicks in the button, 
        //I need to read the custom-id property here
    }

    render() {
        return (
            <Wrapper onClickCapture={this.onClick}>
                <div>
                    <button custom-data={{test: 'test data'}}>Click Me</button>
                </div>
            </Wrapper>
        );
    }
}

在这里，我正在监听包装节点下发生的所有单击事件。每当单击时，我都需要找出与之关联的react组件实例e.target以及该实例的custom-data属性值。将有多个这样的孩子，其custom-dataprop的值不同。每当单击这样的元素时，我都希望提取该元素的值以支持其工作custom-data。在reactjs中做到这一点的最佳方法是什么？一种方法是导航整个子树，并将e.target实例与每个子树的DOM元素共同映射。我也发现e._targetInst._currentElement.props给了我道具的价值。但是我不知道这些未记录的变量有多可靠。是否有任何记录的解决方案？基本上，我正在寻找能够给我ReactDOM.findDOMNode相反效果的东西。我已经有一个DOM节点，并且需要与之关联的React元素。

Answer 1

正如我在上面的评论中提到的，如果您调用 propdata-custom-id而不是custom-id. 这样它将被渲染为 DOM 属性，您可以通过调用 来获取它的值e.target.getAttribute('data-custom-id')。您可以在下面的代码片段中看到它的工作原理。（由于您没有向我们展示 Wrapper 组件的代码，所以我猜测了一个实现。）

class Wrapper extends React.Component {
  componentDidMount() {
    this.refs.wrap.addEventListener('click', this.props.onClickCapture, true);
  }
  componentDidUnmount() {
    this.refs.wrap.removeEventListener('click', this.props.onClickCapture);
  }
  render() {
    return <div ref="wrap">{this.props.children}</div>;
  }
}

class TestInstance extends React.Component {
  onClick(e) {
    console.log('Clicked %s', e.target.getAttribute('data-custom-id'));
  }

  render() {
    return (
      <Wrapper onClickCapture={this.onClick}>
        <div>
          <button data-custom-id="btn-1">Button 1</button>
          <button data-custom-id="btn-2">Button 2</button>
        </div>
      </Wrapper>
    );
  }
}

ReactDOM.render(<TestInstance/>, document.getElementById('root'));

<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>

<div id="root"/>