[英]How to get react element from event.target
我已将事件侦听器附加到父元素以侦听非合成事件,并且我想知道是否有一种很好的方法来获取对触发该事件以使用其属性的组件的引用
我需要推迟item.component
的呈现,直到nonSyntheticEvent
发生
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} />
在React 16.3中引入了React.createRef()
,可在Component
使用该Component
在呈现Child
组件之前创建引用。
例如在Component.constructor
,可以在状态中创建对每个子项的引用
this.state = {
items: items.map(item => ({
...item,
reference: React.createRef()
}))
};
然后可以在子组件中使用道具:
function Child(props){
return (
<div ref={props.reference}>
<span>{props.name}</span>
</div>
);
}
然后在nonSyntheticEventHandler
中可以按以下方式获得项目:
const found = this.state.items.find(item => {
return item.reference.current === event.target;
});
Codesandbox.io中的工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.