反应过来 - 选择快速过滤器选项过滤器不工作(react-select-fast-filter-op

我一直在尝试使用反应过来，选择快速过滤器选项通过传递props.options，但过滤不会发生。所有的选项都得到渲染，但过滤器不能正常工作。

我也越来越警告：警告：getDefaultProps仅在经典React.createClass定义中使用。使用一个名为静态属性defaultProps代替。

这是我想使用快速过滤器：

import React, { Component } from 'react';
import VirtualizedSelect, { Value } from 'react-virtualized-select';
import createFilterOptions from 'react-select-fast-filter-options';
import 'react-select/dist/react-select.css';
import styles from './CategoryDropdown.less';
import CategoryDropdownOption from './CategoryDropdownOption';
import CategoryDropdownValue from './CategoryDropdownValue';

class CategoryDropdown extends Component {

  constructor(props, context) {
    super(props, context);
    **const filterOptions = createFilterOptions({
      labelKey: 'code',
      options: props.options
    });**
    this.sortOptions = this.sortOptions.bind(this);
    this.setValue = this.setValue.bind(this);
    this.clearValue = this.clearValue.bind(this);
    const dValue = props.defaultValue ? props.defaultValue : {};
    this.state = { value: dValue, options: [], selectedOption:{}, filterOptions };
  }

  componentDidMount() {
    this.sortOptions(this.props.options);
    this.setValue('');
  }

  componentWillReceiveProps(nextProps) {
    this.sortOptions(nextProps.options);
  }

  clearValue() {
    this.setState({ value: '' });
    this.setState({selectedOption:{}});
  }

    return (
      <div
        key={key}
        className={classNames.join(' ')}
        onClick={() => {
          focusOption(option);
          selectValue(option);
        }}
        onMouseDown={(e) => {
          e.preventDefault();
          e.stopPropagation();
          focusOption(option);
          selectValue(option);
        }}
        onMouseEnter={() => { focusOption(option); }}
        style={style}
        title={option.label}>
        <div className="categoryOptionType">
          <span className={option.categoryName}>{option.categoryDisplayName}</span>
        </div>
        <div className="optionLabelContainer">
          <span className="optionLabel">{value}</span>
        </div>
      </div>
    );
  }

  render() {
    const {filterOptions} = this.state;
    return (
      <VirtualizedSelect
        simpleValue
        clearable={true}
        label='code'
        name="form-field-name"
        multi={this.props.multi}
        optionHeight={20}
        onChange={this.setValue}
        **filterOptions={filterOptions}**
        options={this.state.options}
        searchable={true}
        value={this.state.selectedOption}
        optionRenderer={this.virtualOptionRenderer}
        valueComponent={this.props.emptyValueComponent ? Value : CategoryDropdownValue}
        className={this.props.className || 'categoryDropdown'}
        optionClassName={this.props.optionClassName || 'categoryOption'}
        placeholder={this.props.placeholder || 'Start typing to search'}
        autosize={this.props.autosize !== false}
        //matchProp="label"
      />

    );
  }
}

export default CategoryDropdown;

我不知道你**的标签，似乎它是用来注释代码。

但是，如果我们跳过这个**标记你的代码是好的，但你过滤你的filterOptions ： filterOptions = createFilterOptions({ ... })当该组件被初始化只执行一次在构造函数中。

穿上这件块componentWillReceiveProps应该解决您的问题。

componentWillReceiveProps(nextProps) {
  const filterOptions = createFilterOptions({
    labelKey: 'code',
    options: nextProps.options
  });
  this.setState({filterOptions});
  this.sortOptions(nextProps.options);
}