如何在click處理程序中獲取與event.target元素相對應的反應組件實例？

Question

這是我的反應組件類

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

在這裏，我聽包裝節點下發生的所有點擊事件。無論何時發生點擊，我都需要找出與e.target關聯的反應組件實例以及該實例的custom-data支持的值。 custom-data道具將會有多個此類兒童具有不同的值。每當這樣一個元素被點擊時，我想爲它的custom-data提取該元素的值，並做一些事情。在reactjs中做這件事的最好方法是什麼？一種方法是導航整個兒童樹，並與每個兒童的DOM元素共同製作身份標識實例。我還發現e._targetInst._currentElement.props給了我道具的價值。但我不知道這些無證變量有多可靠。是否有任何記錄的解決方案？基本上我正在尋找一些能讓我產生ReactDOM.findDOMNode的相反效果的東西。我已經有了一個DOM節點，我需要與之相關的React元素。

Answer 1

保存一個裁判，並檢查e.target是一樣的裁判

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

Answer 2

正如我在上面提到的意見，這是容易得多，如果你調用道具data-custom-id，而不是custom-id。這樣它將被呈現爲DOM屬性，您可以通過調用e.target.getAttribute('data-custom-id')來獲得它的值。你可以看到它在下面的代碼片段中工作。 （因爲你沒告訴我們的包裝組件的代碼我花了猜測的實現。）

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

Answer 3

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