reactjs - 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>

我的问题是，当我单击 Select 组件时，在 Select 的使用过程中，甚至在选择了一个项目之后，Tooltip 都会保持显示。

我希望它在 Select 被点击后立即消失，这样它就不会停留在 MenuItems 上(更改 zIndex 不是我想要的解决方案)，并且即使在菜单中选择一个项目后仍然不显示。

我用我遇到的简单问题制作了一个代码沙盒: https://codesandbox.io/s/yvloqr5qoj

但我正在使用 typescript ，这是我正在使用的实际代码:

受控工具提示

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: 你必须让你的工具提示 controlled 。

更新:
根据您的实际代码，将 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 可以控制工具提示。

对 PASTEBINS 的回答

您将需要处理 Tooltip 的 open Prop :

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
}

并将其反射(reflect)在您的 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)} >

Select 中的事件处理程序(onMouseEnter、onMouseLeave、onClick)现在控制工具提示显示/隐藏行为。