材质 ui 组件上的 onHover 事件未呈现图标

如何解决材质 ui 组件上的 onHover 事件未呈现图标

我目前正在尝试在 Material UI 组件上呈现删除图标，更具体地说，是 MenuItem 组件。我在组件的状态中创建了一个状态字段并将其设置为 false(this.state.isHovering)。这个想法是，当我将鼠标悬停在帐户项目上时，我想呈现删除图标，当我将鼠标悬停时，它应该消失。我使用 onMouseEnter 和 onMouseLeave 实现了这些事件侦听器，并将它们附加到 MenuItem。然后我做了它，以便图标仅在 this.state.isHovering 为真时显示。但是，当我将鼠标悬停在 MenuItem 上时，它不会呈现。但是，如果我只是在没有涉及状态的情况下实现了图标，它就会呈现。我还控制台登录了事件处理程序，以确保事件正在注册，并且在悬停进出时都会进行控制台记录。请看我的代码。谢谢！

import React,{ Component,Fragment } from 'react';
import { Typography,withStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import MenuItem from '@material-ui/core/MenuItem';
import Icon from '@material-ui/core/Icon';
import AccountTypeIcon from './AccountTypeIcon';


class PortDashSideBar extends Component {

  handleMouseEnter = () => {
    this.setState({
      isHovering: true,})
  }

    handleMouseLeave = () => {
    this.setState({
      isHovering: true,})
  }


              <MenuItem
                onMouseEnter={this.handleMouseEnter}
                onMouseLeave={this.handleMouseLeave}
                className={account.id === currentAccountId ? classes.selectedAccount : classes.unselectedAccount}
                hover
                name={account.name}
                key={account.id}
                onClick={ () => this.setCurrentAccount(account.id) }>
                <TableCell className={classes.cellAccountIcon}>
                  <AccountTypeIcon type={this.getAccountById(account.id).type} />
                </TableCell>
                <TableCell className={classes.cellName}>
                  <Typography className={classes.accountName}>
                    {account.label}
                  </Typography>
                  <Typography>
                    <span>
                      {this.getHoldingsForAccount(account.id)}
                    </span>
                    {
                      this.state.isHovering && <Icon>delete</Icon>
                    }
                  </Typography>
                </TableCell>
              </MenuItem>
            ))
          }
        </TableBody>
      </Table>
    );
  }

 

解决方法

我认为您的代码存在一些问题：

1. 状态从未定义
2. 您没有正确更新状态
3. 您没有正确地有条件地检查/使用状态
4. 您提供的代码中有很多错误（看起来像不完整的复制粘贴）

您可以使用 reactHooks 来帮助定义您的 state 和 setState 函数

这是我最好的答案，但是您提供的代码缺少帐户变量和许多引用的函数，因此不完整。但它应该有助于解决您的状态问题

import React,{ Component,Fragment,useState } from 'react';
import { Typography,withStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import MenuItem from '@material-ui/core/MenuItem';
import Icon from '@material-ui/core/Icon';
import AccountTypeIcon from './AccountTypeIcon';


class PortDashSideBar extends Component {
  const [isHovering,setIsHovering] = useState(false);
  handleMouseEnter = () => {
    setIsHovering(true);
  }

  handleMouseLeave = () => {
    setIsHovering(false);
  }

  return <MenuItem
    onMouseEnter={handleMouseEnter}
    onMouseLeave={handleMouseLeave}
    className={account.id === currentAccountId ? classes.selectedAccount : classes.unselectedAccount}
    hover
    name={account.name}
    key={account.id}
    onClick={ () => this.setCurrentAccount(account.id) }>
    <TableCell className={classes.cellAccountIcon}>
      <AccountTypeIcon type={this.getAccountById(account.id).type} />
    </TableCell>
    <TableCell className={classes.cellName}>
      <Typography className={classes.accountName}>
        {account.label}
      </Typography>
      <Typography>
        <span>
          {this.getHoldingsForAccount(account.id)}
        </span>
        {
          isHovering ? <Icon>delete</Icon> : null
        }
      </Typography>
    </TableCell>
  </MenuItem>;
}