Javascript 显示隐藏多个工具提示以反应材质

我正在我的一个项目中使用

React material

框架。我正在尝试添加多个

受控工具提示

，它们只有在各自的

状态

为

可见时才可见

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

另外，在一个页面内将有多个父组件，每个组件有三组工具提示，即编辑、删除、查看

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

class-ControlledTooltips扩展了React.Component{
状态={
开：错，
};
handleTooltipClose=（）=>{
this.setState（{open:false}）；
};
handleTooltipOpen=（）=>{
this.setState（{open:true}）；
};
render（）{
返回(
);
}
}


任何帮助都将不胜感激：）
我建议不要使组件状态过于复杂化。在我看来，每个组件都应该控制其状态的一个非常精确的部分

我建议创建一个自定义工具提示来处理每个元素的状态。您可以构建3个
编辑、删除、查看
宽度

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

class-TooltipCustom扩展了React.Component{
状态={
开放：假
};
切换状态=（）=>{
this.setState（{open:！this.state.open}）；
};
render（）{
返回(
{this.props.children}
);
}
}
常量删除=（）=>(
);
常量编辑=（）=>(
);
常量视图=（）=>(
);
常量可控工具提示=（）=>(
);
以防有人在寻找答案。正如@EinarÓlafsson所建议的，我制作了一个自定义工具提示包装，其中包含所有三个工具提示

需要显示的工具提示名称
已传递给
handletooltippen（）和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>
    );
  }
}

class-ControlledTooltips扩展了React.Component{
状态={
编辑：false，
删除：false，
视图：false
};
handleTooltipClose=（名称）=>{
this.setState（{[name]：false}）；
};
handleTooltipOpen=（名称）=>{
this.setState（{[name]：true}）；
};
render（）{
返回(
this.handleTooltipClose（“delete”）}
onOpen={（）=>this.handleTooltipOpen（“删除”）}
open={this.state.delete}
placement=“底部”
title=“删除”
>
this.handleTooltipClose（“编辑”）}
onOpen={（）=>this.handleTooltipOpen（“编辑”）}
open={this.state.edit}
placement=“底部”
title=“编辑”
>
this.handleTooltipClose（“视图”）}
onOpen={（）=>this.handleTooltipOpen（“视图”）}
open={this.state.view}
placement=“底部”
title=“查看”
>
);
}
}
你能在你的沙盒演示中演示实际问题吗？@EinarÓlafsson我已经更新了链接。我已经为你写了一个建议@vijayscode，希望对你有所帮助。