How to get the react component instance corresponding to event.target element in a click handler?

Question

This is my react component class

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

Here I'm listening to all click events that happen under the wrapper node. Whenever a click happens, I need to find out the react component instance associated with e.target and that instance's value for its custom-data prop. There will be multiple such children with different values for custom-data prop. Whenever such an element is clicked, I want to extract that element's value for its custom-data prop an do some stuff. What is the best way to do this in reactjs? One way would be to navigate the entire children tree and comapring the e.target instance for identity with the DOM elements for each of the children. I also found that e._targetInst._currentElement.props gives me the value of the props. But I don't know how reliable these undocumented variables are. Is there any documented solution for this? Basically I'm looking for something that gives me the opposite effect of ReactDOM.findDOMNode. I already have a DOM node and I need the React Element associated with that.

Answer 1

As I mentioned in the comments above, this is much easier if you call the prop data-custom-id instead of custom-id. That way it will be rendered as a DOM attribute and you can get its value by calling e.target.getAttribute('data-custom-id'). You can see it working in the below snippet. (Since you didn't show us the code for the Wrapper component I took a guess at an implementation.)

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