Question

所以我在这里有这个代码，当我将鼠标悬停在其父div上时，我基本上试图隐藏一些图标。或者让它可见，但不管怎样......

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 =＆＃39; edit＆＃39;的元素。 componentDidMount（）函数的代码确实有效，所以我假设showIcon（）和hideIcon（）中的引用都是在开始时，编辑＆＃39;之前生成的。元素甚至呈现。我认为那些愚蠢的js只是＆＃34; precache＆＃34;而不是阅读我的功能＆＃34;原样＆＃34;。

无论如何，我该如何解决这个问题？关于国家的事情？

Answer 1

因为你没有绑定函数所以它的上下文是事件而不是反应，你可以用两种方式绑定函数

1.constructor（首选方式）

this.showIcon = this.showIcon.bind(this)

然后在Jsx中使用

this.showIcon

//使用

this.showIcon.bind(this)

//而不是

this.showIcon

（React）悬停时无法隐藏内容吗？

1 个答案: