如何在反应选择选项值 <Div> 标签中添加标题答案

【问题标题】：how to add title in react select option value <Div> tag如何在反应选择选项值 <Div> 标签中添加标题
【发布时间】：2019-02-08 08:57:55
【问题描述】：

我想在 React-select 框选项值上动态添加标题，我在此使用 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} />

在选项标签中自动添加已制作的Div

过时的即时战略

【问题讨论】：

您能否在codesandbox.io 中添加您的代码以获得更多帮助？
其实我只是想在选择框中添加标题框，我们可以使用选择属性或onfocus功能来做到这一点，我无法在沙箱中添加
React-select 接受一个包含值和标签的对象数组
@Madhur 标题是什么意思，请澄清。
我只想在悬停到选项标签时显示工具提示（但如果我从检查元素向其中添加标题，它会显示工具提示）但我不知道它会怎么做

标签： reactjs react-redux react-select

【解决方案1】：

似乎下面的代码 sn-p 可以帮助你。

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

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

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

【讨论】：

是的，从给定的文档中它可以正常工作。某些文件存在一些问题，我们需要包含哪些并发错误。现已解决
值得指出的是components是从'react-select'导入的。 i.e. import { components } from 'react-select'
如果您想使用选项对象的某些字段作为工具提示的文本，您可以从 props 对象中提取它，例如content={props["data"]["Description"]}.