react-select-fast-filter-options 过滤器不起作用 [英] react-select-fast-filter-options filter does not work

问题描述

我一直在尝试通过传递 props.options 来使用 react-select-fast-filter-options，但过滤没有发生.所有选项都被渲染，但过滤器不起作用.

我也收到警告:警告:getDefaultProps 仅用于经典的 React.createClass 定义.改用名为 defaultProps 的静态属性.

这就是我尝试使用快速过滤器的方式:

import React, { Component } from 'react';import VirtualizedSelect, { Value } from 'react-virtualized-select';从'react-select-fast-filter-options'导入createFilterOptions；导入 'react-select/dist/react-select.css';从'./CategoryDropdown.less'导入样式；从'./CategoryDropdownOption'导入CategoryDropdownOption；从'./CategoryDropdownValue'导入CategoryDropdownValue；类 CategoryDropdown 扩展组件 {构造函数(道具，上下文){超级(道具，上下文)；**const filterOptions = createFilterOptions({labelKey: '代码',选项: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);}清除值(){this.setState({ value: '' });this.setState({selectedOption:{}});}返回 (
{焦点选项(选项)；选择值(选项)；}}onMouseDown={(e) =>{e.preventDefault();e.stopPropagation();焦点选项(选项)；选择值(选项)；}}onMouseEnter={() =>{ focusOption(option);}}风格={风格}标题={option.label}><div className="categoryOptionType"><span className={option.categoryName}>{option.categoryDisplayName}</span>

<div className="optionLabelContainer"><span className="optionLabel">{value}</span>

);}使成为() {const {filterOptions} = this.state;返回 (<虚拟化选择简单值可清除={真}标签='代码'名称=表单字段名称"multi={this.props.multi}选项高度={20}onChange={this.setValue}**filterOptions={filterOptions}**选项={this.state.options}可搜索={真}值={this.state.selectedOption}optionRenderer={this.virtualOptionRenderer}valueComponent={this.props.emptyValueComponent ?值:类别下拉值}className={this.props.className ||'类别下拉'}optionClassName={this.props.optionClassName ||'类别选项'}占位符={this.props.placeholder ||'开始输入搜索'}autosize={this.props.autosize !== false}//matchProp="标签"/>);}}导出默认的 CategoryDropdown；

解决方案

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

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

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

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

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;

解决方案

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);
}

这篇关于react-select-fast-filter-options 过滤器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！