显示隐藏多个工具提示React材质

Question

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

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

第页。在一个页面中会有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>
);
}
}

代码沙箱链接

任何帮助都将不胜感激：(

Answer 1

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

我建议创建一个自定义工具提示，用于处理每个元素的状态。你可以建立你的3Edit, 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>
);

Answer 2

以防有人在寻找答案。根据@Einarólafsson的建议，我制作了一个自定义的工具提示包装器，里面有所有三个工具提示。

需要显示的CCD_ 8被传递给CCD_。在这个函数中，我更改了单个工具提示的状态。

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