Question

我有以下内容：

<Col sm="12" md="4">
  <FormGroup>
    <Label for="exampleText">
      Vendor Name*{" "}
      <FontAwesomeIcon
        id="TooltipExample"
        icon={faInfoCircle}
        color={"blue"}
      />
    </Label>
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="TooltipExample"
      toggle={toggle}
    >
      Please make sure that the name filled in is same as Bank Account
      name. If the names are different, please input reason under
      'Notes'.
    </Tooltip>
    <Input
      innerRef={register({ required: true })}
      type="input"
      name="name"
      disabled={!accountEditMode}
    />
    {errors.vendorName && <div className={"text-danger"}>Required</div>}
  </FormGroup>
</Col>
<Col sm="12" md="4">
  <FormGroup>
    <Label>
      Address Line 1{" "}
      <FontAwesomeIcon
        id="tooltipAddress1"
        icon={faInfoCircle}
        color={"blue"}
      />
    </Label>
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="tooltipAddress1"
      toggle={toggle}
    >
      Please make sure that the name filled in is same as Bank Account
      name. If the names are different, please input reason under
      'Notes'.
    </Tooltip>
    <Input
      maxLength="50"
      innerRef={register({ required: true })}
      type="input"
      name="address1"
      disabled={!accountEditMode}
    />
  </FormGroup>
</Col>

上面的问题是，每次我将鼠标悬停在工具提示上时，由于它们共享相同的钩子（tooltipOpen），因此全部打开。但是我不想为我的工具提示使用56个不同的钩子。有关如何执行此操作的任何提示？没错，每个工具提示都需要一个钩子。

Answer 1

您可以包装您的工具提示组件。

function MyToolTip () {
  const [tooltipOpen, setTooltipOpen] = useState(false)

  return (
    <Tooltip
      placement="right"
      isOpen={tooltipOpen}
      target="TooltipExample"
      toggle={() => setTooltipOpen(!tooltipOpen)}
    >
  )
}

用多个工具提示对表带进行反应

1 个答案: