javascript - react-select 分组的多个选项以对象为值
问题描述
所以,我正在尝试将react-select组件添加到我的项目中。我正在使用分组选项并尝试能够选择多个选项
这是我的组件代码
class QueueFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
options: [
{
label: 'Partner',
options: [
{
value: {
id: 'ABCDSC',
value: 'Partner1'
},
label: 'Partner1'
},
{
value: {
id: 'ABCDSC',
value: 'Partner2'
},
label: 'Partner2'
}
]
},
{
label: 'Study',
options: [
{
value: {
id: 'ABCDSC123',
value: 'Study1'
},
label: 'Study1'
}
]
}
],
selectedFilters: []
};
this.fecthQueueFilters = this.fecthQueueFilters.bind(this);
this.onFilterChange = this.onFilterChange.bind(this);
this.applyFilter = this.applyFilter.bind(this);
}
componentDidMount(prevState, prevProps) {
if (prevProps.queueId !== this.props.queueId) {
this.fetchQueueFilters(this.props.queueId);
}
}
onFilterChange(selectedFilters) {
this.setState({ selectedFilters });
}
fecthQueueFilters(queueId) {
}
applyFilter() {
}
render() {
const groupStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
};
const groupBadgeStyles = {
backgroundColor: '#EBECF0',
borderRadius: '2em',
color: '#172B4D',
display: 'inline-block',
fontSize: 12,
fontWeight: 'normal',
lineHeight: '1',
minWidth: 1,
padding: '0.16666666666667em 0.5em',
textAlign: 'center',
};
const formatGroupLabel = data => (
<div style={groupStyles}>
<span>{data.label}</span>
<span style={groupBadgeStyles}>{data.options.length}</span>
</div>
);
const Input = (props) => {
if (props.isHidden) {
return <components.Input {...props} />;
}
return (
<div style={{ border: '1px dotted black' }}>
<components.Input {...props} />
</div>
);
};
return (
<Container fluid className="main-header">
<Row>
<Col xs="1">Queue Filters:</Col>
<Col auto>
<Select
options={this.state.options}
isMulti
isClearable
formatGroupLabel={formatGroupLabel}
components={{Input}}
closeMenuOnSelect={false}
value={this.state.selectedFilters}
onChange={this.onFilterChange}
/>
</Col>
<Col xs="1">
<Button type="button" onClick={this.applyFilter} color="success">
<Filter />
</Button>
</Col>
</Row>
</Container>
);
}
}
QueueFilter.propTypes = {
queueId: PropTypes.string
};
export default QueueFilter;
但是当我选择多个选项时,选择字段中只显示 1
控制台显示选择了 2 个选项
而且,控制台中有这个警告
如果我将选项值更改为简单字符串而不是对象
this.state = {
options: [
{
label: 'Partner',
options: [
{
value: 'ABCDSC:Partner1',
label: 'Partner1'
},
{
value: 'ABCDSC:Partner2',
label: 'Partner2'
}
]
},
{
label: 'Study',
options: [
{
value: 'ABCDSC123:Study1',
label: 'Study1'
}
]
}
],
selectedFilters: []
};
好吧,它按预期工作,但我宁愿拥有对象值。
知道如何实现这一目标吗?
解决方案
你可以使用道具getOptionValue
<Select
getOptionValue={option => option.value.value}
推荐阅读
- mongodb - Does querying certain fields only save query time in mongodb?
- java - Passing values to java program from a command line, how does it work?
- c# - Binding DropdownList with a nested json result
- python - How to combine two LSTM layers with different input sizes in Keras?
- swift - TableViewCell does not get data in Swift
- android - What does QUERY_ALL_PACKAGES permission do?
- mysql - Mysql Create VIEW with CONCAT and two colums
- reactjs - 如何在 Object.keys 中获取除某个键之外的所有键?
- android - 引起:java.lang.Exception:无法识别命令`config`
- c - 当我尝试编译 libburn 中的测试文件夹时,Gcc 抛出错误