Esta es mi clase de componente de reacción.
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> ); } } Aquí estoy escuchando todos los eventos de clic que ocurren bajo el nodo contenedor. Cada vez que ocurre un clic, necesito averiguar la instancia del componente de reacción asociada con e.target y el valor de esa instancia para su prop custom-data . Habrá varios niños de este tipo con diferentes valores para prop custom-data . Cada vez que se hace clic en un elemento de este tipo, quiero extraer el valor de ese elemento para su prop custom-data hacer algunas cosas. ¿Cuál es la mejor manera de hacer esto en reactjs? Una forma sería navegar por todo el árbol de niños y comparar la identidad de la instancia de e.target con los elementos DOM para cada uno de los niños. También encontré que e._targetInst._currentElement.props me da el valor de los accesorios. Pero no sé qué tan confiables son estas variables no documentadas. ¿Hay alguna solución documentada para esto? Básicamente estoy buscando algo que me dé el efecto opuesto de ReactDOM.findDOMNode. Ya tengo un nodo DOM y necesito el React Element asociado con eso.
Como mencioné en los comentarios anteriores, esto es mucho más fácil si llama al prop data-custom-id en lugar de custom-id . De esa forma, se representará como un atributo DOM y podrá obtener su valor llamando a e.target.getAttribute('data-custom-id') . Puede verlo funcionando en el siguiente fragmento. (Dado que no nos mostró el código para el componente Wrapper, adiviné una implementación).
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"/>Guarde una referencia y verifique que e.target sea lo mismo que la referencia
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.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" />