response-bootstrap-table: программный фильтр, щелкнув с другого компонента

Я использую компонент response-bootstrap-table и хотел бы программным образом фильтровать столбец, нажав кнопку с другого компонента.response-bootstrap-table: программный фильтр, щелкнув с другого компонента

Я следовал Программная Select Filter примера из react-bootstrap-table examples list но не удался адаптировать его так кнопку от другого компонента может управлять фильтром.

Когда я звоню this.refs.nameCol.applyFilter(1); на щелчок, я получаю следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'applyFilter' of undefined

Главный вопрос: что это лучший подход к решению этого?

Тестовый пример здесь:

var data = [ 
 
    {id : "1", name : "Item name 1", quality : "bad"}, 
 
    {id : "2", name : "Item name 2", quality : "good"}, 
 
    {id : "3", name : "Item name 3", quality : "unknown"}, 
 
    {id : "4", name : "Item name 4", quality : "good"}, 
 
    {id : "5", name : "Item name 5", quality : "good"}, 
 
    {id : "6", name : "Item name 6", quality : "bad"} 
 
]; 
 

 
const qualityType = { 
 
    'good': 'good', 
 
    'bad': 'bad', 
 
    'unknown': 'unknown' 
 
}; 
 

 
function enumFormatter(cell, row, enumObject) { 
 
    return enumObject[cell]; 
 
} 
 

 
var FilterBtn = React.createClass({ 
 
    handleBtnClick: function(e) { 
 
    this.refs.nameCol.applyFilter(1); // Cannot read property 'applyFilter' of undefined 
 
    }, 
 
    render: function() { 
 
    return (
 
     <button onClick={ this.handleBtnClick } className='btn btn-default'>Click to apply select filter</button> 
 
    ); 
 
    } 
 
}); 
 

 
var BigTable = React.createClass({ 
 
    render: function() { 
 
     return (
 
      <div> 
 
      <BootstrapTable data={ data }> 
 
       <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn> 
 
       <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn> 
 
       <TableHeaderColumn ref='nameCol' dataField='quality' filterFormatted dataFormat={ enumFormatter } 
 
        formatExtraData={ qualityType } filter={ { type: 'SelectFilter', options: qualityType } }>Product Quality</TableHeaderColumn> 
 
      </BootstrapTable> 
 
      </div> 
 
     ); 
 
     } 
 
    }); 
 

 
ReactDOM.render(
 
    <div> 
 
    <FilterBtn/> 
 
    <BigTable/> 
 
    </div>, 
 
    document.querySelector("#container") 
 
);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <div id="container"></div> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
    <script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script> 
 
    
 
</body> 
 
</html>

Большое спасибо за вашу помощь!

=================================================================================================================================================== ==========================

UPDATE

Эта проблема была решена благодаря помощи @SatyaDash.

Обновлено скрипка: https://jsfiddle.net/0ydcgy9g/

Для тех, кто заинтересован, я также применил этот подход к программно отфильтровать столбец к этому времени выбирая опцию из списка в ниспадающего из другого компонента.

Fiddle: https://jsfiddle.net/d1qhfm50/5/

Надеется, что это помогает.

источник

2017-02-06 Surreal

Я написал вашу программу в ES6.Вставьте код ниже.

Проблема в том, что вы упомянули словарь опций выбора как что-то, и при применении фильтра вы передаете другой аргумент. Поэтому, если вы хотите выбрать хороший при нажатии кнопки, тогда вам нужно передать «хороший» в функции applyFilter.

 var data = [ 
     {id : "1", name : "Item name 1", quality : "bad"}, 
     {id : "2", name : "Item name 2", quality : "good"}, 
     {id : "3", name : "Item name 3", quality : "unknown"}, 
     {id : "4", name : "Item name 4", quality : "good"}, 
     {id : "5", name : "Item name 5", quality : "good"}, 
     {id : "6", name : "Item name 6", quality : "bad"} 
    ]; 

    const qualityType = { 
     'good': 'good', 
     'bad': 'bad', 
     'unknown': 'unknown' 
    }; 

    function enumFormatter(cell, row, enumObject) { 
     return enumObject[cell]; 
    } 
class FilterBtn extends React.Component{ 
    constructor(){ 
    super(); 
    this.handleBtnClick = this.handleBtnClick.bind(this); 
    } 
    handleBtnClick(){ 
    this.props.callAF(); 
    } 
    render(){ 
    return (
      <button 
       onClick={ this.handleBtnClick } 
     className='btn btn-default'> 
     Click to apply select filter 
      </button> 
     ); 
    } 
} 
class BigTable extends React.Component{ 
    constructor(){ 
    super(); 
    this.state={ 
     data: data 
    } 
    } 
    componentWillReceiveProps(nextProps){ 
    if(this.props.applyFilter !== nextProps.applyFilter){ 
     this.refs.nameCol.applyFilter('good'); 
    } 
    } 
    render(){ 
    return(
      <div> 
       <BootstrapTable data={data}> 
        <TableHeaderColumn 
      dataField='id' 
      isKey> 
      Product ID 
        </TableHeaderColumn> 
        <TableHeaderColumn 
      dataField='name'> 
      Product Name 
        </TableHeaderColumn> 
        <TableHeaderColumn 
      ref='nameCol' 
      dataField='quality' 
      filterFormatted 
      dataFormat={ enumFormatter } 
         formatExtraData={ qualityType } 
      filter={{ 
       type: 'SelectFilter', 
       options: qualityType 
         }}> 
      Product Quality 
        </TableHeaderColumn> 
       </BootstrapTable> 
      </div> 
     ); 
    } 
} 
class MainClass extends React.Component{ 
    constructor(){ 
    super(); 
    this.state = { 
     applyFilter : false 
    } 
    this.callAFF = this.callAFF.bind(this); 
    } 
    callAFF(){ 
    this.setState({ 
     applyFilter: true 
    }); 
    } 
    render(){ 
    return (
     <div> 
     <FilterBtn 
      callAF={ 
       this.callAFF 
      }/> 
     <BigTable 
      applyFilter={this.state.applyFilter}/> 
     </div> 
    ); 
    } 
} 
ReactDOM.render(
    <MainClass/>, 
    document.querySelector("#container") 
);

источник

2017-02-06 18:10:39 SatyaDash

Привет, Большое спасибо за помощь. – Surreal

Вы правы, я не передавал правильный аргумент в функции 'applyFilter', но это было не единственное изменение, которое применимо для реализации решения, когда вы добавили реквизиты и состояния там. Большое спасибо! – Surreal

Однако я заметил, что кнопка фильтра работала только в первый раз, когда она была нажата (если была нажата кнопка, тогда из выпадающего списка была выбрана другая опция, при повторном нажатии кнопки кнопка не вернула фильтр в «хороший»). Я узнал об этом из-за условия 'if (this.props.applyFilter! == nextProps.applyFilter)'. Удаление этого условия устранило проблему. Не могли бы вы объяснить, почему это было необходимо @SatyaDash? [Обновлено скрипка] (https://jsfiddle.net/0ydcgy9g/) – Surreal

response-bootstrap-table: программный фильтр, щелкнув с другого компонента

ответ

Смежные вопросы