reactjs和redux：如何实现一行数据的过滤文本框答案

【问题标题】：reactjs and redux: How to implement filter text box for a rows of datareactjs和redux：如何实现一行数据的过滤文本框
【发布时间】：2017-11-20 06:41:43
【问题描述】：

我正在学习 reactj 和 redux。不知何故，我设法从 api 获取数据并将它们显示在表格中。下表如下所示。

我想在每个列标题下方添加过滤器文本框，以便当我输入文本时，它会显示与结果匹配的值。

使用redux的流程是什么。或者任何例子

【问题讨论】：

拜托，尝试，尝试，遇到问题，那么stackoverflow stackoverflow就有意义了！
如果我创建了一个输入元素，将输入的值传递到哪里
您可以使用 redux 或在您的组件状态中执行此操作。 redux：使用您的商店发送此值。在你的 reducer 中处理这个事件。在基于此值的渲染函数过滤器中。与此类似，您可以对您的内部状态进行操作。

标签： reactjs redux

【解决方案1】：

我刚刚输入了这个，只是为了大致了解如何在 mapstate 函数中过滤数据。这称为计算派生数据https://redux.js.org/docs/recipes/ComputingDerivedData.html，使用 Reselect 等工具可以提高性能。这不是工作代码，但它只是为了让您了解它通常是如何完成的，这样您就不会在减速器中获得重复的状态。

class Table extends React.Component {
  filterData = (event, column) => {
    this.props.someFilterAction(event.target.value, column)
  }
  renderItem = (item) => {
    return <someItemDiv searchAction={(e) => this.filterData(e, item.column) } />
  }
  render(){
    <div>
      { this.props.data.map(this.renderItem) }
    </div>
  }
}

function mapStateToProps(state) {
  const searchItem = state.searchData;
  // reselect is good for stuff like this
  const filteredData = state.tableData.filter(item => item[searchItem.column].text.indexOf(searchItem.input) !== -1 )
  // or some kind of search criteria you want
  return {
    data: filteredData,
    searchItem: state.searchData
  }
}
const mapDispatchToProps = {
  someFilterAction: YourReduxActionCreator
}
export default connect(mapStateToProps, mapDispatchToProps)(Table);

function YourReduxActionCreator(input, column) {
  return {
    type: FILTER_DATA,
    payload: {
      column,
      input,
    }
  }
}

function yourReducer() {
  switch(state, action) {
      case FILTER_DATA:
          return action.payload
      default:
          return state;
  }
}

【讨论】：

感谢您的布局

【解决方案2】：

你只需要创建 2 个选择器。

第一个：getTableData() 从您的商店获取整个表格数据

然后 getFilteredTableData() 将使用您的字段（您的关键字和列）的表单值过滤 getTableData() 的结果。

选择器 getFilteredTableData() 应该是您的表的数据源。

因此，一旦您的表单更改，您的表格就会被重新过滤！

【讨论】：

对开始很有帮助
如果您需要更多信息，请随时询问