更改内容点击并悬停在react semantic ui popup元素中

Question

我正在使用弹出组件react-semantic-ui，它会在悬停/点击时触发弹出窗口。我想根据触发的元素是否被点击或悬停来更改内容。例如：我的UI中有一个设置框。当我将鼠标悬停在每个盒子上时，它应该触发弹出元素，但内容应该只是名称，当单击该框时，应该会显示完整的详细信息。有没有办法做到这一点或找出事件？

<Popup
  trigger={
    <span>
      I am the trigger element 
    </span>
  }
  hoverable={false}
  content={'test}
/>

Answer 1

Pallavi Hegde为了做到这一点，您需要自己控制Popup的状态。现在，您依赖于语义-ui-react的Popup组件的内部控制状态。

要完成此项工作，您需要创建可在组件上使用的handleOnClick()和handleOnHover()方法。您可以使用这些方法在弹出窗口的父组件中触发状态更改，这将根据悬停/单击状态更改Popup中的内容。将布尔open道具传递给Popup组件基本上会禁用状态。

有关受控组件如何在语义（您想要的）中工作的一个很好的示例与您当前使用开箱即用功能进行的操作相比，请查看此示例：{{3} }