显示隐藏多个工具提示反应材料

Posted 2023-02-22

【中文标题】显示隐藏多个工具提示反应材料

【英文标题】：Show hide multiple tooltips React material

【发布时间】：2019-05-03 14:52:13

【问题描述】：

我在我的一个项目中使用React material 框架。我正在尝试添加多个controlled tooltips，它们只有在它们各自的state 为visible 时才可见。

不幸的是，现在我被卡住了，因为我与多个组件共享相同的状态，因此一旦您将鼠标悬停在其中任何一个上，所有工具提示都是可见的。有什么办法吗？我认为这可以通过数组来完成。

P.S 在一个页面内会有multiple parent components，每个页面都有三组工具提示，即Edit, Delete, View

class ControlledTooltips extends React.Component 
  state = 
    open: false,
  ;

  handleTooltipClose = () => 
    this.setState( open: false );
  ;

  handleTooltipOpen = () => 
    this.setState( open: true );
  ;

  render() 
    return (
      <div>
        <Tooltip
          enterDelay=300
          id="tooltip-controlled"
          leaveDelay=300
          onClose=this.handleTooltipClose
          onOpen=this.handleTooltipOpen
          open=this.state.open
          placement="bottom"
          title="Edit"
        >
          <IconButton aria-label="Delete">
            <Edit />
          </IconButton>
        </Tooltip>
        <Tooltip
          enterDelay=300
          id="tooltip-controlled"
          leaveDelay=300
          onClose=this.handleTooltipClose
          onOpen=this.handleTooltipOpen
          open=this.state.open
          placement="bottom"
          title="view"
        >
          <IconButton aria-label="view">
            <Visibility />
          </IconButton>
        </Tooltip>
        <Tooltip
          enterDelay=300
          id="tooltip-controlleded"
          leaveDelay=300
          onClose=this.handleTooltipClose
          onOpen=this.handleTooltipOpen
          open=this.state.open
          placement="bottom"
          title="Delete"
        >
          <IconButton aria-label="Delete">
            <DeleteOutlined />
          </IconButton>
        </Tooltip>
      </div>
    );
  

codesandbox link

任何帮助将不胜感激:)

【问题讨论】：

您能在您的沙盒演示中演示实际问题吗？

@EinarÓlafsson 我已经更新了链接。

我给你写了一个建议@vijayscode，希望对你有帮助。

【参考方案1】：

我建议不要将您的组件状态过于复杂化。在我看来，每个组件都应该控制其状态的一个非常精确的部分。

我建议创建一个自定义工具提示来处理每个元素的状态。您可以构建您的 3 Edit, Delete, View 宽度。

class TooltipCustom extends React.Component 
  state = 
    open: false
  ;

  toggleState = () => 
    this.setState( open: !this.state.open );
  ;

  render() 
    return (
      <IconButton aria-label=this.props.title>
        <Tooltip
          enterDelay=300
          leaveDelay=300
          onClose=this.toggleState
          onOpen=this.toggleState
          open=this.state.open
          placement="bottom"
          title=this.props.title
        >
          this.props.children
        </Tooltip>
      </IconButton>
    );
  


const Delete = () => (
  <TooltipCustom title="delete">
    <DeleteIcon />
  </TooltipCustom>
);

const Edit = () => (
  <TooltipCustom title="Edit">
    <EditIcon />
  </TooltipCustom>
);

const View = () => (
  <TooltipCustom title="View">
    <VisibilityIcon />
  </TooltipCustom>
);

const ControlledTooltips = () => (
  <div>
    <Delete />
    <Edit />
    <View />
  </div>
);

【参考方案2】：

如果有人正在寻找答案。正如@Einar Ólafsson 所建议的那样，我制作了一个自定义工具提示包装器，其中包含所有三个工具提示。

需要显示的Tooltip name 已传递给handleTooltipOpen() and handleTooltipClose() 函数。在此函数中，我更改了单个工具提示的状态。

class ControlledTooltips extends React.Component 
  state = 
    edit: false,
    delete: false,
    view: false
  ;
  handleTooltipClose = (name) => 
    this.setState( [name]: false );
  ;

  handleTooltipOpen = (name) => 
    this.setState( [name]: true );
  ;

  render() 
    return (
      <div>
        <Tooltip
          id="tooltip-controlled-delete"
          onClose=() => this.handleTooltipClose("delete")
          onOpen=() => this.handleTooltipOpen("delete")
          open=this.state.delete
          placement="bottom"
          title="Delete"
        >
          <IconButton name="delete" aria-label="Delete">
            <DeleteOutlined name="delete" />
          </IconButton>
        </Tooltip>
        <Tooltip
          id="tooltip-controlled-edit"
          onClose=() => this.handleTooltipClose("edit")
          onOpen=() => this.handleTooltipOpen("edit")
          open=this.state.edit
          placement="bottom"
          title="edit"
        >
          <IconButton name="edit" aria-label="edit">
            <Edit />
          </IconButton>
        </Tooltip>
        <Tooltip
          id="tooltip-controlled-view"
          onClose=() => this.handleTooltipClose("view")
          onOpen=() => this.handleTooltipOpen("view")
          open=this.state.view
          placement="bottom"
          title="view"
        >
          <IconButton name="view" aria-label="view">
            <Visibility />
          </IconButton>
        </Tooltip>
      </div>
    );