score:3

Accepted answer

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

score:-1

Save a ref to it and check that e.target is the same as ref

class TestInstance extends React.Component {
    element = null;

    onClick(e) {
        //When the user clicks in the button, 
        //I need to read the custom-id property here
        if (e.target === ReactDOM.findDOMNode(element)) {
          // get custom id here
        }
    }

    render() {
        return (
            <Wrapper onClickCapture={this.onClick}>
                <div>
                    <button ref={e => this.element = e} custom-id="btn">Click Me</button>
                </div>
            </Wrapper>
        );
    }
}

score:-1

class Wrapper extends React.Component {
  render() {
    return (
      <div>
       <button onClick = {()=>this.props.onCapture({'id':'1','name':'btn-1'})}>Button 1</button>
       <button onClick = {()=>this.props.onCapture({'id':'2','name':'btn-2'})}>Button 2</button>
        </div>
    )
  }
}

class TestInstance extends React.Component {
  onClick(expr) {
    console.log(expr);
    //console.log('Clicked %s', e);
  }

  render() {
    return (
      <Wrapper onCapture={this.onClick}/>
    );
  }
}

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


Related Query

More Query from same tag