Question

我正在尝试在react-bootstrap-table中使用日期范围过滤器和select过滤器对

columns = [{"Vehicle":"RIL1000","Driver":"Josh","JobDate":"01/21/2019"},  {"Vehicle":"ZIGZI","Driver":"William","JobDate":"01/27/2019"}];
this.refs.jobs_table.handleFilterData({Vehicle:"RIL1000"});

这是我正在使用的JobDate列

this.refs.jobDate.applyFilter({ callback: isFiltered });

function isFiltered(targetValue) {

   targetValue = new Date(targetValue)

   var start = "01/27/2019";//(this.refs.min.value)?new Date(this.refs.min.value):false;
   var end = "01/29/2019";//(this.refs.max.value)?new Date(this.refs.max.value):false;

   if (start && !end)
   {
      return targetValue >= start;
   }

   if (!start && end)
   {
      return targetValue <= end;
   }

   if (start && end)
   {
      return targetValue >= start && targetValue <= end;
   }
}

问题是applyFilter可以工作，或者handleFilterData我需要在AND条件下工作。

任何帮助将不胜感激。

Answer 1

在下面的代码中，我觉得您过度使用了refs，建议您不要使用它，请依靠React的州和道具您的数据和处理程序。

我们应该允许 react 在 DOM 上工作，创建引用意味着直接访问DOM，这与React并不合适。

我还可以看到您在Ref中持有带有处理程序的对象

this.refs.jobDate.applyFilter({ callback: isFiltered });

还有ref中的状态值，我觉得这不是必需的

this.refs.jobs_table.handleFilterData(this.state.filter);

代码：

 class ListArea extends React.Component{
       constructor(props)
       {
           super(props);
           this.state = {
           filter: this.topfilters}
       }
       componentDidUpdate ()
       {
            this.refs.jobDate.applyFilter({ callback: isFiltered });
            this.refs.jobs_table.handleFilterData(this.state.filter);
       }
       render (){
          return (
            <div className="row">
            <BootstrapTable printable ref="jobs_table" data={this.props.jobs} striped tableHeaderClass="thead-class" >
                <TableHeaderColumn dataField="Driver" dataSort={ true }>Driver</TableHeaderColumn>
                <TableHeaderColumn dataField="Vehicle" dataSort={ true }>Vehicle</TableHeaderColumn>
                <TableHeaderColumn ref="jobDate" dataField="jobDate"  dataSort={ true } filter={{
                            type: "CustomFilterjsfidd",
                            getElement: getCustomFilter,
                            customFilterParameters: {startDate:this.state.filter.startDate,endDate:this.state.filter.endDate}
                 }}>Date</TableHeaderColumn>
            </BootstrapTable>
            </div>
             );
       }
    }
    function getCustomFilter(filterHandler, customFilterParameters) {
       return (
          <RangeFilter filterHandler={filterHandler}
                       startDate={customFilterParameters.startDate}
                       endDate={customFilterParameters.endDate} />
       );
    }
    class RangeFilter extends React.Component {
       constructor(props) {
          super(props);
          this.isFiltered = this.isFiltered.bind(this);
          this.state =   {
                            startDate: '',
                            endDate : '',
                            filtered: 0,
                            props_recieved:0
                         };
          // this.filter = this.filter.bind(this);
       }

       filter(event) {
          console.log("well its in filter")
             if (!this.refs.min.value && !this.refs.max.value)
             {
                // console.log("if condition")
                this.props.filterHandler();
             }
             else
             {
                // console.log("else condition")
                this.props.filterHandler({ callback: this.isFiltered });
             }
       }
       componentDidUpdate()
       {
          console.log("componentDidUpdate",this.state.startDate,this.state.endDate);
       }
       componentWillReceiveProps(props) {

          console.log("componentWillReceiveProps",props,this.state.startDate  , this.state.endDate)
          if(this.state.startDate !== props.startDate || this.state.endDate !== props.endDate )
          {
             this.setState(state=> ({filtered:0, props_recieved:1, endDate: props.endDate, startDate: props.startDate}));
          }
       }

       isFiltered(targetValue) {

          targetValue = new Date(targetValue)

          var start = (this.refs.min.value)?new Date(this.refs.min.value):false;
          var end = (this.refs.max.value)?new Date(this.refs.max.value):false;

          if (start && !end)
          {
             return targetValue >= start;
          }

          if (!start && end)
          {
             return targetValue <= end;
          }

          if (start && end)
          {
             return targetValue >= start && targetValue <= end;
          }
       }

       render() {
          const startDate = (typeof this.state.startDate !== "undefined" && this.state.startDate !== '' &&  this.state.startDate != null)?this.state.startDate.format("MM/DD/YYYY"):"";//new Date(this.props.startDate).toLocaleTimeString("en-US");
          const endDate = (typeof this.state.endDate !== "undefined" && this.state.endDate !== '' &&  this.state.endDate != null)?this.state.endDate.format("MM/DD/YYYY"):'';//new Date(this.props.endDate).toLocaleTimeString("en-US");
          return (
             <div className="colFiltersDiv">
                <input ref="min" type="text" name="date_from" id="date_from" className="date_from filter" onInput={(e) => this.filter(e)} placeholder="min" /><br/>
                <input ref="max" type="text" name="date_to" id="date_to" className="date_to filter" onInput={(e) => this.filter(e)} placeholder="max" />
             </div>
          );
       }
    };

如何同时使用自定义过滤器和this.refs.jobs_table.handleFilterData（）react-bootstrap-table

1 个答案: