Question

我正在实现一个材料UI List，该材料UI映射到用户列表并为每个用户生成一个新的ListItem。这些ListItem中的每一个都是用户个人资料的图片，我要做的是，当您将鼠标悬停在该图片上时，会出现带有用户信息的工具提示。

这很好。但是，我无法弄清楚为什么在将每个Tooltip中的ListItem悬停在interactive上时实际上会保持打开状态的问题。目前，一旦它离开图像，工具提示就会被删除（再次，我不想发生这种情况）。

从文档中看来，在Tooltip组件上使用import React, { Component } from 'react' import { List, ListItem, ListItemText, Tooltip } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' import classNames from 'classnames' const styles = theme => ({ flex: { display: 'flex', flexWrap: 'wrap' }, defaultIconContainer: { position: 'relative', borderRadius: '50%', backgroundColor: 'orange', // use theme global variable width: '40px', height: '40px' }, defaultIconTextContainer: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '0 !important' }, defaultIconText: { color: theme.palette.text.contrastText }, thumbnailImage: { backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', margin: '0 5px 10px' } }) type Props = { type: ?string, usersList: Array } class HelpUsers extends Component<Props> { defaultProps = { type: 'thumbnail', usersList: [] } thumbnail = ({ user, classes }) => ( <ListItem key={user.id} disableGutters className={classNames( classes.defaultIconContainer, classes.thumbnailImage )} style={{ backgroundImage: `url(${user.profilePicture})` }} > <Tooltip title={ <React.Fragment> <div>{user.name}</div> <div>{user.title}</div> <div>{user.company}</div> <div>p: {user.mobilePhone}</div> <div>c: {user.workPhone}</div> <div>e: {user.email}</div> </React.Fragment> } interactive > <div style={{ opacity: 0 }}>{user.name}</div> </Tooltip> </ListItem> ) render() { const { usersList, classes } = this.props if (this.props.type === 'thumbnail') { return ( <List className={classes.flex}> { usersList.map(user => this.thumbnail({ user, classes })) } </List> ) } return <div>Hello</div> } } export default withStyles(styles)(HelpUsers)应该可以解决此问题，但是对我来说不起作用...

撇开一些内部逻辑，这实际上是我在说的：

const users = [
  {
    id: 1,
    name: 'Test Name 1',
    profilePicture: 'https://fillmurray.com/200/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test1@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 2,
    name: 'Test Name 2',
    profilePicture: 'https://fillmurray.com/100/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test2@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 3,
    name: 'Test Name 3',
    profilePicture: 'https://fillmurray.com/200/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test3@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 4,
    name: 'Test Name 4',
    profilePicture: 'https://fillmurray.com/400/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test4@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 5,
    name: 'Test Name 5',
    profilePicture: 'https://fillmurray.com/400/500',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test5@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  }
]

这是一个userList示例：

function getCheckboxVal(el)
{
    var price = el.getAttribute("Price");
    '<%Session["Price"] = "' + price +'"; %>';
}

我们将不胜感激！

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

编辑：

我实际上只是创建了以下codeandbox，由于某种原因，它在这里正常运行，但是在我的应用程序中却无法运行...我可能不得不向上看一些级别，以了解为什么这会影响行为：

2

Answer 1

好吧，这很尴尬...好像我在我的应用程序上使用旧版本的Material UI一样，这就是codeandbox起作用的原因。我决定将版本更改为最新版本（3.5.1，并解决了问题……将其留在这里是因为它可能以某种方式也可以帮助/提醒人们检查版本。

列表上的React Material UI工具提示在悬停时不会保持打开状态

1 个答案: