Question

我正在实现一个自定义表，该表将具有分页，过滤，排序和其他常见功能。我不想使用现有的解决方案，既因为这是熟悉React的好习惯，又因为我希望该表适合我的需求。

我遇到的问题与过滤有关。我想要的是在“过滤器”中放入“ does object pass filter”逻辑；我已经在其他语言中成功使用了这种模式，而且非常干净。

但是，使用React时，所有逻辑都必须放在父级中，因为父级无法在子级上调用方法。所以我被卡住了。

这就是我想做的。

class FilterContainer extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);

    this.state = { isOpen: false };
  }

  toggle() {
    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    return (
      <Fragment>
        <FaFilter id="filter-icon" />
        <Popover placement="right" isOpen={this.state.isOpen} target="filter-icon" toggle={this.toggle}>
          <PopoverHeader>Filter table</PopoverHeader>
          <PopoverBody>
            {this.props.children}
          </PopoverBody>
        </Popover>
      </Fragment>
    );
  }
};

class Filter extends Component {
  constructor(props) {
    super(props);

    this.setValue = this.setValue.bind(this);
  }

  setValue(event) {
    this.props.setValue(this.props.name, event.target.value);
  }

  // I want this as a method on the filter because I will have different types of
  // filters, and I don't want to duplicate this everywhere I use a filter
  passesFilter(obj){
    if (obj.hasownproperty(this.props.name)){
      if (obj[this.props.name].contains(this.props.value)){
        return true;
      }
    }
  }

  render() {
    return (
      <Fragment>
        <Label>
          {this.props.name}

          <Input
            id={this.props.name + "-value"}
            type="text"
            value={this.props.value}
            onChange={this.setValue} />
        </Label>
      </Fragment>
    );
  }
};

但是现在想象一下，我没有一个Filter，而是一个可以处理大小写和正则表达式的StringFilter，一个是true / false的BoolFilter，也可以是DateFilter，等等。每一个都具有“通过过滤器”的概念，并将它们复制到DataTable以及我想在其中使用它们的其他任何地方。

希望这是有道理的，否则我可以提供更多细节。

Answer 1

您可以创建过滤器库函数并导入一些并堆叠过滤器结果例如

Filter/Date
myFilterDateBetween(DateA, DateB, DateC){ 
  //true false
}
myFilterDateBefore(DateA, DateB){ 
  //true false
}

// other DateFilter

Filter/Boolean
filterIsTrue(Bool){ 
  //true false
}

// other BooleanFilter

Filter/...type
//other filter base on type:

在导入过滤器之后，在需要的地方调用它们

import myFilterDateBetween from 'Filter/Date'
import MyOtherFilterBoolean from 'Filter/Boolean'

data.filter( 
   (item)=>myFilterDateBetween(item.date,dateA, dateB)
).filter(
    (item)=>MyOtherFilterBoolaen(item.Boolean, true)
)

我希望这可以为您提供帮助

如何重用组件逻辑

1 个答案: