带有多个工具提示的 React 表带

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

带有多个工具提示的 React 表带

React strap with multiple ToolTips

reactjs

reactstrap