Reactjs 如何在选择选项值中添加标题<；部门>；标签

我想在React select box选项值上动态添加标题，我正在使用React select库

代码：

 import * as React from 'react'; import Select from 'react-select';
 import { Dispatch } from 'redux';
 import { QUICK_FILTER_TYPES } from '../../constants';
 import { setQuickFilters } from '../../redux/actions';
 import reactSelectStyles from '../../styles/react-select-styles';
 import { IValueLabelTitleObject } from '../../typedefs/interfaces';

 const **options** = [ QUICK_FILTER_TYPES.STALE_RTS,
     QUICK_FILTER_TYPES.MISSING_RTS, QUICK_FILTER_TYPES.STALE_DPUL,
     QUICK_FILTER_TYPES.MISSING_DPUL,
     QUICK_FILTER_TYPES.STALE_DELIVERY_FORECAST,
     QUICK_FILTER_TYPES.MISSING_DELIVERY_FORECAST,
     QUICK_FILTER_TYPES.LATE_DELIVERIES, QUICK_FILTER_TYPES.UPCOMING_RTS,
     QUICK_FILTER_TYPES.UPCOMING_DPUL,
     QUICK_FILTER_TYPES.UPCOMING_DELIVERIES,
 ].map(v => ({ value: v, label: v, title: v })); 

 <Select
     isMulti menuIsOpen name="quick-filter-select"
     onChange={selectedValues => props.dispatch(
     setQuickFilters(selectedValues as IValueLabelTitleObject[]) ) }
     **options={options}** placeholder="Quick filters"
     styles={reactSelectStyles()} value={props.quickFilters} />

import*as React from'React'；从“反应-选择”导入选择；
从'redux'导入{Dispatch}；
从“../../constants”导入{QUICK_FILTER_TYPES}；
从“../../redux/actions”导入{setQuickFilters}；
从“../../styles/react select styles”导入reactSelectStyles；
从“../../typedefs/interfaces”导入{IValueLabelTitleObject}；
常量**选项**=[QUICK\u FILTER\u TYPES.STALE\u RTS，
快速过滤器类型。缺少RTS，快速过滤器类型。过时的DPUL，
快速过滤器类型。缺少\u DPUL，
快速过滤器类型。过时交付预测，
快速过滤器类型。缺少交付预测，
快速过滤器类型。延迟交付，快速过滤器类型。即将进行的RTS，
快速过滤器类型。即将推出的过滤器，
快速过滤器类型。即将交付的过滤器，
].map（v=>（{value:v，label:v，title:v}））；
道具调度(
setQuickFilters（selectedValues为IValueLabelTitleObject[]）}
**选项={options}**placeholder=“快速过滤器”
样式={reactSelectStyles（）}值={props.quickFilters}/>

自动添加选项标签中的Div

过期RTS

---

下面的代码片段似乎可以帮助您

const Option = (props) => {
  return (
    <Tooltip content={'Customise your option component!'} truncateText>
      <components.Option {...props}/>
    </Tooltip>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ Option }}
    options={options}
  />
);

const选项=（道具）=>{
返回(
);
};
导出默认值（）=>(
);

---

有关更多详细信息，请阅读有关自定义选项的react select文档

是否可以添加代码以获取更多帮助？实际上，我只是想在选择框中添加标题框，我们可以使用选择属性或onfocus函数来实现这一点，我无法在sandboxReact选择接受对象数组中添加包含值和label@Madhur标题是什么意思，请澄清。我只想在悬停到选项标记时显示工具提示（但如果我将标题添加到这个from inspect元素中，它会显示工具提示）但我不知道它将如何做从给定的文件，它的工作正常。有些文件出现了一些问题，我们需要包括哪些并发错误。现在需要指出的是，

组件

是从

'react-select'

导入的<代码>即从“react select”导入{components}如果您想使用选项对象的某个字段作为工具提示的文本，您可以从props对象中提取它，例如内容={props[“data”][“Description”]}。