Question

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

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);

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

我想让它在点击选择后立即消失，以便它不会停留在MenuItems上（更改zIndex不是我想要的解决方案），即使在选择了一个项目后仍然不显示菜单。

我用一个简单的问题制作了一个代码框：https://codesandbox.io/s/yvloqr5qoj

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

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>

使用工具提示的组件

Sub DeleteRow()

    Application.EnableEvents = False    
    Application.ScreenUpdating = False
    Sheet1.Unprotect Password:="Password!"
    Dim rng As Range    
    On Error Resume Next
    With Selection.Cells(1)
        Set rng = Intersect(.EntireRow, ActiveCell.ListObject.DataBodyRange)
        On Error GoTo 0
        If rng Is Nothing Then
            MsgBox "Please select a valid table cell.", vbCritical
        Else
            rng.Delete xlShiftUp   'This is the line where the debug is pointing to
        End If
    End With
    Sheet1.Protect Password:="Password!"
    Application.EnableEvents = True

End Sub

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，这是不受控制的。现在，包含select（或任何子项）的div可以控制工具提示。

答案的答案

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

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)} >

Select中的事件处理程序（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)}}
        ...
    >

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

ControlledTooltip

使用工具提示的组件

2 个答案: