Используйте специальный компонент ввода фильтра с Griddle

Я использую griddle компонент реакции для создания таблицы.

Griddle поддерживает дополнительный атрибут для отображения элемента ввода фильтра, который управляет таблицей.

Есть ли способ использовать свою собственную независимую форму/ввод с гридми. Так что, когда передается сторонний ввод, я могу вызвать некоторую функцию внутри griddle для обновления таблицы?

Я просмотрел документы и разместил здесь проблему . Я не знаю, как это сделать.

ОТВЕТЫ

Ответ 1

Как показано в этой демонстрации, вы можете указать настраиваемый фильтр и настраиваемый компонент:

var _ = require('underscore'),
    squish = require('object-squish');

var customFilterFunction = function(items, query) {
  return _.filter(items, (item) => {
    var flat = squish(item);

    for (var key in flat) {
      if (String(flat[key]).toLowerCase().indexOf(query.toLowerCase()) >= 0)
        return true;
    }

    return false;
  });
};

var customFilterComponent = React.createClass({
  getInitialState() {
    return {
      "query": ""
    };
  },
  searchChange(event) {
    this.setState({
      query: event.target.value
    });
    // this line is important
    this.props.changeFilter(this.state.query);
  },
  render() {
    return (
      <div className="filter-container">
        <input type="text"
               name="search"
               placeholder="Search..."
               onChange={this.searchChange} />
      </div>
    );
  }
});

Затем вы можете инициализировать таблицу Griddle следующим образом:

React.render(
  <Griddle results={fakeData} showFilter={true}
    useCustomFilterer={true} customFilterer={customFilterFunction}
    useCustomFilterComponent={true} customFilterComponent={customFilterComponent}/>,
  document.getElementById('griddle')
);

Прокрутка changeFilter передается на ваш customFilterComponent, потому что это customFilterComponent prop of Griddle.