react-select中选项的禁用原因

Question

有没有一种方法显示为什么我使用react-select时禁用了某个选项？ 类似于选项对象中的disabledReason属性？

Answer 1

假设您要在菜单中的禁用选项旁边显示原因，则可以覆盖选项的呈现方式，以包括原因的方式呈现。

如何使用react-select API精确地执行此操作取决于您使用的是V1还是V2的react-select。

V1示例：https://github.com/JedWatson/react-select/blob/v1.x/examples/src/components/CustomComponents.js
V2文件：https://react-select.com/props#replacing-components

Answer 2

一个可能的解决方案是

1. 在react-selection组件上使用react的SyntheticEvent onMouseEnter检查鼠标是否悬停。
2. 检查是否已禁用反应选择组件

3. 如果反应选择被禁用，则显示工具提示

   In React, onMouseEnter or hover is not working as expected

   https://reactjs.org/docs/events.html#mouse-events

   tooltip div with ReactJS