react-select-fast-filter-options filter does not w

问题:

I have been trying to use react-select-fast-filter-options by passing props.options, but the filtering does not happen. All the options are getting rendered but the filter doesn't work.

I am also getting a warning: Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead.

This is how I am trying to use the fast-filter:

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;

回答1:

I am not sure about your ** tag, seems it is used to comment the code.

However, if we skip that ** tag then your code is good, except you are filtering your filterOptions: filterOptions = createFilterOptions({ ... }) within the constructor which is ONLY executed ONCE when the component is initialized.

Put this block on componentWillReceiveProps should fix your problem.

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