javascript - react 选择分组的多个选项以对象作为值

Question

所以，我正在尝试添加 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: []
};

嗯，它按预期工作，但我宁愿拥有对象值。

知道如何实现这一目标吗？

Answer 1

您可以使用 Prop getOptionValue

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