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

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關聯的react組件實例以及該custom-data prop的實例值。 將有多個這樣的子項具有不同的custom-data支持值。 每當點擊這樣一個元素時，我想提取該元素的值，為其custom-data支持做一些事情。 在reactjs中執行此操作的最佳方法是什么？ 一種方法是導航整個子樹並將e.target實例與每個子元素的DOM元素共同構成標識。 我還發現e._targetInst._currentElement.props給了我道具的價值。 但我不知道這些無證變量有多可靠。 有沒有任何形成文件的解決方案？ 基本上我正在尋找一些讓我與ReactDOM.findDOMNode相反的東西。 我已經有了一個DOM節點，我需要與之關聯的React Element。

Answer 1

正如我在上面的評論中提到的，如果你調用prop data-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"/> 

Answer 2

保存一個引用並檢查e.target是否與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>
        );
    }
}

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