javascript - 显示隐藏多个工具提示 React Material

Question

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

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

P.S 一个页面内会有多个父组件，每个组件都有三组工具提示，即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

任何帮助将不胜感激:)

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