我想动态地在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
Stale 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}
/>
);
有关更多详细信息，请阅读有关自定义选项的 React-Select 文档 document
关于reactjs - 如何在 react 选择选项值 <Div> 标签中添加标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52147425/