Question

我的react应用程序具有带有以下搜索过滤器功能的react-router v4：

  filterList = (e) => {
    let { value } = e.target;
    this.setState({ value }, () => {
        var searchValue = this.state.value.toLowerCase();
        var updatedList = this.state.holder;
        updatedList = updatedList.filter((item) => {
            return Object.keys(item).some(key => item[key].toString().toLowerCase().search(searchValue) !== -1);
        });
            this.setState({ books: updatedList });
    });
  }

当我编辑时，它将转到编辑页面。编辑完成后，它会返回，该如何与剩余搜索结果一起返回？

Answer 1

您可以使用react-router中的Link组件并将to={}指定为对象，并在其中指定路径名作为要到达的路由。然后添加一个变量，例如searchResult保留您要传递的值。请参见下面的示例。

使用<Link />组件：

<Link
  to={{
    pathname: "/page",
    searchResult: this.state.searchResult
  }}
>

使用history.push()

this.props.history.push({
  pathname: '/page',
  searchResult: this.state.searchResult
})

使用以上任一选项，您现在都可以按照页面组件中的以下内容访问位置对象上的searchResult。

render() {
  const { searchResult } = this.props.location
  return (
    // render logic here
  )
}

在另一个示例here中，您可以看到一个如何将值与路由一起传递的示例。

反应-如何返回上一个分页？

1 个答案: