How to get react element from event.target

Question

I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the component which triggers the event to use it's properties

I need to postpone the rendering of item.component until the nonSyntheticEvent occurs

const items = [
  {
    name: "click me",
    component: function First() {
      return <strong>asd</strong>;
    }
  },
  {
    name: "click me 2",
    component: function Second() {
      return <b>oasd</b>;
    }
  }
];

class Component extends React.Component {
  componentDidMount() {
    this.el.addEventListener("nonSyntheticEvent", event =>
      this.nonSyntheticEventHandler(event)
    );
  }

  nonSyntheticEventHandler(event) {

    // how to get reference to item
    // from event.target to render it's item.component

    const el = React.createElement(item.component);
    ReactDOM.render(el, event.target);
  }

  render() {
    return (
      <div ref={ref => { this.el = ref; }}>
        {this.props.items.map(item => <Child {...item} />)}
      </div>
    );
  }
}

<Component items={items} />

You could try attaching a reverse reference in the ref function, maybe? ref={ref => { this.el = ref; ref.reactComponent = this }}. Seems very hacky, though. — Håken Lid
– Håken Lid, Commented Sep 2, 2018 at 7:15
It should be handled with refs, not necessarily as suggested above but somehow. What's your case exactly? What is this event and why should div be replaced with its own child? There may be much less complicated ways to achieve a similar thing, depending on what should the result look like. — Estus Flask
– Estus Flask, Commented Sep 2, 2018 at 20:05
It's a select event, native for Apple TV TVML applications and the doc will not be replaced by it's child, I was trying to simplify the question — Teneff
– Teneff, Commented Sep 3, 2018 at 10:13

Teneff · Accepted Answer · 2018-09-03 08:20:37Z

5

With React 16.3 React.createRef() is introduced which can be used in Component to create reference before the Child component is rendered.

for example in Component.constructor a reference to each child can be created in the state

this.state = {
  items: items.map(item => ({
    ...item,
    reference: React.createRef()
  }))
};

and then in the Child component can be used from props:

function Child(props){
  return (
    <div ref={props.reference}>
      <span>{props.name}</span>
    </div>
  );
}

and then in the nonSyntheticEventHandler the item can be obtained like so:

const found = this.state.items.find(item => {
  return item.reference.current === event.target;
});

working example in Codesandbox.io

answered Sep 3, 2018 at 8:20

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get react element from event.target

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related