Reactjs 如何同时使用自定义筛选器和此.refs.jobs_table.handleFilterData（）映射引导表

我试图在react引导表中使用日期范围过滤器和两个选择过滤器

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

this.refs.jobDate.applyFilter（{callback:isFiltered}）；
函数已筛选（targetValue）{
targetValue=新日期（targetValue）
var start=“01/27/2019”；/（this.refs.min.value）？新日期（this.refs.min.value）：false；
var end=“01/29/2019”；/（此参考最大值）？新日期（此参考最大值）：false；
如果（开始和结束）
{
返回targetValue>=开始；
}
如果（！开始和结束）
{
return targetValue=start&&targetValue查看下面的代码，我觉得您使用过度了，建议不要这样做，请依靠React的状态和道具来保存数据和处理程序

我们应该允许react在DOM上工作，创建ref意味着直接访问DOM，而react不适合这样做

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

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

另外，ref中的state值，我觉得这不是必需的

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

类列表区域扩展了React.Component{
建造师（道具）
{
超级（道具）；
此.state={
过滤器：this.topfilters}
}
组件更新（）
{
this.refs.jobDate.applyFilter（{callback:isFiltered}）；
this.refs.jobs\u table.handleFilterData（this.state.filter）；
}
渲染（）{
返回(
司机
车辆
日期
);
}
}
函数getCustomFilter（filterHandler、customFilterParameters）{
返回(
);
}
类RangeFilter扩展了React.Component{
建造师（道具）{
超级（道具）；
this.isFiltered=this.isFiltered.bind（this）；
此.state={
起始日期：''，
结束日期：“”，
过滤：0，
收到的道具：0
};
//this.filter=this.filter.bind（this）；
}
过滤器（事件）{
日志（“过滤器中的井”）
如果（！this.refs.min.value&！this.refs.max.value）
{
//控制台日志（“如果条件”）
this.props.filterHandler（）；
}
其他的
{
//console.log（“else条件”）
this.props.filterHandler（{callback:this.isFiltered}）；
}
}
componentDidUpdate（）
{
log（“componentDidUpdate”，this.state.startDate，this.state.endDate）；
}
组件将接收道具（道具）{
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_received:1，endDate:props.endDate，startDate:props.startDate}））；
}
}
isFiltered（目标值）{
targetValue=新日期（targetValue）
var start=（this.refs.min.value）？新日期（this.refs.min.value）：false；
var end=（this.refs.max.value）？新日期（this.refs.max.value）：false；
如果（开始和结束）
{
返回targetValue>=开始；
}
如果（！开始和结束）
{
返回targetValue=start&&targetValue

this.filter（e）}占位符=“max”/>
);
}
};
我可以看看您是如何创建this.refs的吗initially@PraveenRaoChavan.G我已尝试在fiddle中通过尽可能多的信息。哪是您的react版本，是否>=16.3？是的，^16.6.3请参考，也请尝试max以避免使用REFSY您完全正确亲爱的Pravee，我只是依赖react引导表，所以使用refs。让我试试to根据您的建议尽量避免裁判。乐意帮助