我如何在提交我的表单时将结果重定向到 React 中的另一个页面

Question

我正在尝试让搜索结果显示在 React Js 的另一个页面上。现在，当我提交我的搜索表单时，它会在我不想要的同一页面上显示结果。在过去的 4 个小时里，我一直在尝试这样做（我是 ReactJS 的新手），我在网上看到了很多建议，但似乎没有任何效果像我希望的那样。

我什至尝试过使用 react redux、react router 和更多在线示例，但没有用，请注意我做错了什么。

我该如何处理？关于我在下面提供的代码，我希望有人可以让我走上正确的轨道，也欢迎您 suggestions/feedback。

提前致谢。

这是我负责表单的搜索引擎组件

const SearchEngine = (props) => {

        return (

            <div>
                <h3 className="spacer">Search Engine</h3>
                <form onSubmit={props.getTrend}>
                <div class="input-group md-form form-sm form-2 pl-0">

                        <input class="form-control my-0 py-1 red-border" type="text" name="keyword" placeholder="Enter your keyword" aria-label="Search" />

                    <div class="input-group-append">
                      <button class="input-group-text red lighten-3" id="basic-text1"><i class="fa fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
                </form>
            </div>
        );
}

export default SearchEngine;

这是我想显示结果的结果组件

const Results = (props) => (

    <div>

        Hello

    </div>

);


 export default Results;

Answer 1

收到您的 api 电话后，您可以推送并转到另一个页面。对于您来说，它可能看起来像这样。

    getTrend = async (e) => {
    e.preventDefault();

    const keyword = e.target.elements.keyword.value;

    const api_call = await fetch(`http://localhost:8081/trend/twitter?keyword=${keyword}`); //make API call

    const data = await api_call.json(); 


   if (keyword) {
        this.setState({
          tweets: data
        });
        console.log(this.state.tweets);
        this.props.history.push({
  pathname: '/results',
  state: { detail: data }
})
      } 
      else {
        this.setState({
          tweets: undefined,
          error: "Please enter the values"
        });
      }
  }

然后，在您的 App.js 中，您可以使用

访问它

props.location.state.detail

这可能需要您将 withRouter 用作 HOC。我要改变的一件事是在 componentDidMount 中获取你的 api。但是，如果你使用钩子来解决这个问题会容易得多。虽然它可能需要一些折射，但您可以使用挂钩进行 api 调用，这更容易起床运行.

我如何在提交我的表单时将结果重定向到 React 中的另一个页面

How can I on Submit my Form redirect the Results to another Page in React

search-form

reactjs

react-router

react-redux