javascript - How to get react element from event.target - Stack Overflow

admin管理员组

文章数量:1357134

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 ponent which triggers the event to use it's properties

I need to postpone the rendering of itemponent until the nonSyntheticEvent occurs

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

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

  nonSyntheticEventHandler(event) {

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

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

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

<Component items={items} />

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 ponent which triggers the event to use it's properties

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

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

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

  nonSyntheticEventHandler(event) {

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

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

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

<Component items={items} />

• javascript
• reactjs

Share Improve this question Follow edited Sep 2, 2018 at 7:10 Teneff asked Sep 2, 2018 at 6:58 TeneffTeneff 32.2k1313 gold badges7676 silver badges104104 bronze badges 3

• 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 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 plicated ways to achieve a similar thing, depending on what should the result look like. – 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 Commented Sep 3, 2018 at 10:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

With React 16.3 React.createRef() is introduced which can be used in Component to create reference before the Child ponent 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 ponent 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

本文标签： javascriptHow to get react element from eventtargetStack Overflow