Как использовать пользовательский фильтр и this.refs.jobs_table.handleFilterData() одновременно

Question

Я пытаюсь использовать фильтр диапазона дат и пару фильтров выбора в таблице реакции-начальной загрузки

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 Мне нужно работать, работать с ними и в состоянии.

Любая помощь приветствуется.

Answer 1

Глядя на ваш код ниже, я почувствовал, что вы злоупотребляете ссылками. Рекомендуется не делать этого. Пожалуйста, используйте React State и Props для хранения ваших данных и обработчиков.

Мы должны разрешить реагировать на работу с 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>
          );
       }
    };