Material-UI-Select / MenuItem组件上的工具提示在选择后保持显示

Question

我正在使用Material-UI的Select组件，并在其周围带有工具提示，如下所示：

<Tooltip title="Tooltip Test">
  <Select value={this.state.age} onChange={this.handleChange}
    inputProps={{ name: "age", id: "age-simple" }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>...</MenuItem>
  </Select>
</Tooltip>

我的问题是，当我单击“选择”组件时，在使用“选择”期间，甚至在选择一个项目之后，工具提示仍会显示。

我希望它在单击“选择”后立即消失，这样它就不会停留在MenuItems上（更改zIndex不是我想要的解决方案），即使在菜单中选择一个项目之后，它也仍然不会显示。

我用一个简单的问题做了一个codeandbox：https ://codesandbox.io/s/yvloqr5qoj

但是我正在使用打字稿，这是我正在使用的实际代码：

受控工具提示

import * as React from 'react';
import PropTypes from 'prop-types';

import withStyles, { WithStyles } from 'material-ui/styles/withStyles';
import { Tooltip } from 'material-ui';

const styles = {

}

type State = {
    open: boolean,
};

type Props = {
    id: string,
    msg: string,
    children: PropTypes.node,
};


class ControlledTooltip extends React.PureComponent<Props & WithStyles<keyof typeof styles>, State> {

    constructor(props) {
        super(props);

        this.state = {
            open: false,
        };
    }

    private handleTooltipClose(): void {
        this.setState({ open: false });
    }

    private handleTooltipOpen(): void {
        this.setState({ open: true });
    }

    render() {
        const { id, msg, children } = this.props;
        const { open } = this.state;

        return(
            <div>
                <Tooltip id={id}
                    title={msg}
                    open={open}
                    onClose={this.handleTooltipClose}
                    onOpen={this.handleTooltipOpen}
                >
                    {children ? children : null}
                </Tooltip>
            </div>
        );
    }
}

export default withStyles(styles)(ControlledTooltip);

使用工具提示的组件

<ControlledTooltip msg={'Filter'}>
    <Select value={this.state.type} onChange={this.handleChange.bind(this, Filter.Type)}>
        {this.docTypeFilters.map(item => {
            return (<MenuItem key={item} value={item}>{item}</MenuItem>);
        })}
    </Select>
</ControlledTooltip>

Answer 1

TL; DR：您必须控制工具提示。

更新： 根据您的实际代码，用以下代码替换您的返回render()：

            <Tooltip id={id}
                title={msg}
                open={open}
            >
                <div onMouseEnter={this.handleTooltipOpen}
                     onMouseLeave={this.handleTooltipClose}
                     onClick={this.handleTooltipClose}
                >
                   {children ? children : null}
                </div>
            </Tooltip>

问题是您使用的是工具提示中的onClose / onOpen，它的工作方式不受控制。现在，div包含select（或任何子项）的控件可以控制工具提示。

止痛药的答案

您将需要处理工具提示的打开道具：

class SimpleSelect ... 
    constructor(...
        state = {..., open: false}; // the variable to control the tooltip

更改更改处理：

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value, open: false });// keeps the tooltip hidding on the select changes
};

handleOpen = (open) => {
    this.setState({ open }); // will show/hide tooltip when called
}

并反映在您的render()：

 const { open } = this.state; // obtains the current value for the tooltip prop
 ...
 <Tooltip title="Tooltip Test" open={open}>
 ...
   <Select ... onMouseEnter={() => this.handleOpen(true)}
               onMouseLeave={() => this.handleOpen(false)}
               onClick={() => this.handleOpen(false)} >

现在，“选择”中的事件处理程序（onMouseEnter，onMouseLeave，onClick）可以控制工具提示的显示/隐藏行为。

在这里尝试：https : //seecode.run/#-LBNvr787OfJq8nBnK7F

故障转移：https : //codesandbox.io/s/jpk8508769

Answer 2

与 David 的答案相同，但适用于带有 React hooks 的功能组件。

在返回之前的组件中：

const [tooltipOpen, setTooltipOpen] = useState(false)
const handleTooltip = bool => {
    setTooltipOpen(bool)
}

然后在你的回报中：

<Tooltip ... open={tooltipOpen}>
    <Select
        onMouseEnter={() => {handleTooltip(true)}}
        onMouseLeave={() => {handleTooltip(false)}}
        onMouseClick={() => {handleTooltip(false)}}
        ...
    >