react-select 分組的多個選項具有 object 作為值

Question

所以，我正在嘗試將react-select組件添加到我的項目中。 我正在使用分組選項並試圖擁有 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;

但是當我 select 多個選項時，在 select 字段中只顯示了 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: []
};

好吧，它按預期工作，但我寧願擁有 object 值。

知道如何實現這一目標嗎？

Answer 1

您可以使用道具getOptionValue

<Select
  getOptionValue={option => option.value.value}