Question

所以我在ReactJS中遇到问题。我正在尝试使用JavaScript进行简单的下拉菜单。（无需编写CSS示例来进行下拉菜单。我需要在js中使用它，因为这样做会有所延迟）。

我的代码是：

import React, {Component} from 'react';

class Header extends Component {
 constructor(props) {
  super(props);
  this.dropdown = React.createRef();
 }

 handleMouseOver = e => {
  e.preventDefault();
  this.dropdown.current.id.style.display = 'block';
 };

 render() {
  return (
   <header id="header">
     <div onMouseOver={e => this.handleMouseOver(e)}>
       <ul>
         <li className="dropdown">Categories</li>
         <ul id="menu" className="sub-menu" ref={this.dropdown}>
           <li>Computerss & Office</li>
         </ul>
       </ul>
     </div>
   </header>
  )
 }
}
export default Header;

在CSS中，我有：

.menu {
 display: none;
}

和

this.dropdown.current.id.style.display = 'block';

我想显示下拉菜单。但是，当鼠标移到div上时，我得到了错误：

未捕获的TypeError：无法设置未定义的属性“显示”

有趣的是，当我尝试

console.log(this.dropdown.current.id);
alert(this.dropdown.current.id);

我得到输出：

菜单

完全一样，当时我仅使用js在js函数中传递变量并执行document.getElementById(elementId).style.display = "block";，但是在偏离路线时，我可以警告它或console.log

但是当我通过在js函数中编写代码来插入ID时，它可以完美地工作：

document.getElementById('menu').style.display = "block";

因此尝试通过ID时出现问题。为什么会这样呢？

Answer 1

在构造函数中，您需要将this绑定到事件处理程序

constructor() {
    super(props);
    this.dropdown = React.createRef();
    this.handleMouseOver = this.handleMouseOver.bind(this);
}

，您还可以简化事件参考：

<div onMouseOver={this.handleMouseOver}>

您也可以使用组件的状态来完成计划显示/隐藏列表的方式，而不用手动更改HTML元素的CSS值。

您应该在构造函数中创建这样的状态：

this.state = {
    isHovering: false
}

然后在悬停事件处理程序中，可以将此isHovering值设置为true。

有了这个选项，您的render方法只有在isHovering值为true时才能渲染列表：

<div onMouseOver={e => this.handleMouseOver(e)}>
   <ul>
     <li className="dropdown">Categories</li>
     {this.state.isHovering?(
         <ul id="menu" className="sub-menu">
             <li>Computerss & Office</li>
         </ul>
     ):null}
   </ul>
 </div>

在ReactJS中尝试通过ID样式化元素时出错

1 个答案: