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

admin管理员组

文章数量:1353317

This is my react ponent 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 ponent 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 apring 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.

This is my react ponent 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 ponent 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 apring 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.

• javascript
• reactjs

Share Improve this question Follow edited Jan 12, 2017 at 5:12 Jophin Joseph asked Jan 11, 2017 at 20:24 Jophin JosephJophin Joseph 2,95344 gold badges3030 silver badges4141 bronze badges 9

• We're missing some information here. In your example code, the value of the custom-id prop is always going to be "btn", unless some code that you haven't shared is changing that value. What are we missing? – Jordan Running Commented Jan 11, 2017 at 20:29
• @Jordan I just gave this as an example.. There will be a number of other children with different values for custom-id attribute. When any of them are clicked, I want to extract the value of their custom-id attribute and do some stuff with it. – Jophin Joseph Commented Jan 11, 2017 at 20:32
• 1 How does Wrapper listen for all click events on its children? – Jordan Running Commented Jan 11, 2017 at 20:37
• How does Wrapper listen for all click events on its children? – Jordan Running Commented Jan 11, 2017 at 20:39
• It is attached in capture mode. So every event will reach there first before filtering down to its children. – Jophin Joseph Commented Jan 11, 2017 at 20:48

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

As I mentioned in the ments 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 ponent I took a guess at an implementation.)

class Wrapper extends React.Component {
  ponentDidMount() {
    this.refs.wrap.addEventListener('click', this.props.onClickCapture, true);
  }
  ponentDidUnmount() {
    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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"/>

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

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root" />

本文标签：