Показать скрыть несколько подсказок

Question

Я использую React material рамки в одном из моих проектов. Я пытаюсь добавить несколько controlled tooltips которые будут видны только тогда, когда их соответствующие state является visible,

К сожалению, сейчас я застрял, потому что я разделяю одно и то же состояние с несколькими компонентами, поэтому все подсказки видны, когда вы наводите курсор на любой из них. Есть ли способ сделать это? Я думаю, что это может быть сделано с помощью массива.

PS там будут 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

Я бы не советовал слишком усложнять состояние вашего компонента. На мой взгляд, каждый компонент должен контролировать очень точную часть своего состояния.

Я бы порекомендовал создать настраиваемую подсказку, которая будет обрабатывать состояние для каждого элемента. Вы можете построить свой 3 Edit, Delete, View ширина их.

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

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

  render() {
    return (
      <Tooltip
        enterDelay={300}
        id="tooltip-controlled"
        leaveDelay={300}
        onClose={this.toggleState}
        onOpen={this.toggleState}
        open={this.state.open}
        placement="bottom"
        title="Delete"
      >
        {this.props.children}
      </Tooltip>
    );
  }

}

const Delete = () =>
  <TooltipCustom>
    <IconButton aria-label="Delete">
      <DeleteIcon />
    </IconButton>
  </TooltipCustom>

const Edit = () =>
  <TooltipCustom>
    <IconButton aria-label="edit">
      <EditIcon />
    </IconButton>
  </TooltipCustom>

const View = () =>
  <TooltipCustom>
      <IconButton aria-label="view">
        <VisibilityIcon />
      </IconButton>
  </TooltipCustom>

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

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