所以我有这个代码在这里,我基本上试图隐藏一些图标,当我把鼠标悬停在它的父div上。或使其可见,但无论哪种方式...(React)悬停时不能隐藏内容?
export class ProgramDescription extends React.Component {
constructor(props) {
super(props);
}
showIcon() {
this.refs.edit.style.visibility = 'visible';
};
hideIcon() {
this.refs.edit.style.visibility = 'hidden';
};
componentDidMount() {
this.refs.edit.style.visibility = 'hidden';
}
render() {
return (
<div className="ui one cards">
<div className="card">
<div className="content">
<div className="header">Program description</div>
<div className="description package" onMouseEnter={ this.showIcon }
onMouseLeave={ this.hideIcon }>
<i ref="edit" id="edit-icon" className="edit icon"/>
<p id="desc">
Lorem Ipsum</p>
</div>
</div>
</div>
</div>
);
}
}
但很显然,即时得到这个错误,每当我悬停:
Uncaught TypeError: Cannot read property 'edit' of undefined
即使我确实有REF =“编辑”的元素。尽管componentDidMount()函数的代码确实可以工作,所以我假定showIcon()和hideIcon()中的引用都是在“edit”元素被渲染之前的开始时生成的。我认为,这只是js的“愚蠢”,并没有按照原样阅读我的功能。
反正,我该如何解决这个问题?关于国家的事情?
[无法访问做出反应的实例(本)事件处理中(HTTP的可能重复:// stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler) –
@FelixKling那个答案很模糊,我很难得到它的工作 – pizzae