react-select-fast-filter-options 过滤器不起作用答案

【问题标题】：react-select-fast-filter-options filter does not workreact-select-fast-filter-options 过滤器不起作用
【发布时间】：2018-05-01 04:31:52
【问题描述】：

我一直在尝试通过传递 props.options 来使用 react-select-fast-filter-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;

【问题讨论】：

请遵循在 StackOverflow 中定义问题的指南。
这是我的第一个问题，急需解决方案。 @YordanYanakiev

标签： reactjs filter react-redux react-select

【解决方案1】：

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

但是，如果我们跳过 ** 标记，那么您的代码是好的，除非您在构造函数中过滤 filterOptions: filterOptions = createFilterOptions({ ... })，该构造函数仅在组件初始化时执行一次。

将此块放在componentWillReceiveProps 上应该可以解决您的问题。

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

【讨论】：