我如何在提交表单时将结果重定向到 React 中的另一个页面 [英] How can I on Submit my Form redirect the Results to another Page in React

问题描述

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

我什至尝试使用 react redux、react router 和更多在线示例，但不起作用，不要做错了什么.

我该如何接近它?我希望有人能就我在下面提供的代码让我走上正轨，也欢迎您提出建议/反馈.

提前致谢.

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

const SearchEngine = (props) =>{返回 (<div><h3 className="spacer">搜索引擎</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="输入关键字" aria-label="搜索"/><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>

</表单>

);}导出默认搜索引擎；

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

const 结果 = (props) =>(<div>你好

);导出默认结果；

解决方案

在收到您的 api 调用后，您可以推送并移动到另一个页面.对你来说，它可能看起来像这样.

 getTrend = async (e) =>{e.preventDefault();const 关键字 = e.target.elements.keyword.value;const api_call = await fetch(`http://localhost:8081/trend/twitter?keyword=${keyword}`);//进行API调用const 数据 = 等待 api_call.json();如果(关键字){this.setState({推文:数据});控制台日志(this.state.tweets)；this.props.history.push({路径名:'/结果'，状态:{细节:数据}})}别的 {this.setState({推文:未定义，错误:请输入值"});}}

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

访问它

props.location.state.detail

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

I am trying to get the search results to display on another page in React Js. For now, when I submit my search form, it will display the results on the same page which I don't want. I have been trying to do this for the past 4 hours (I am new to ReactJS) and I have been seeing a lot of suggestions online but nothing seems to work as I was hoping.

I have even tried to use react redux, react router and much more example online but does not work, don't what I'm doing wrong.

How can I approach it? I would please like someone to probably put me on the right track in regards to the code I provide below and also your suggestions/feedback are welcome.

Thank you in advance.

Here is my search engine component responsible for the form

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;

and here is the result component where I would like to display the results

const Results = (props) => (

    <div>

        Hello

    </div>

);


 export default Results;

解决方案

After receiving your api calls you can throw a push and move to another page. For yours it may look something like this.

    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"
        });
      }
  }

Then, in your App.js you can access it with

props.location.state.detail

This may require that you use withRouter as a HOC. One thing I would change is grab your api in componentDidMount. However, it would be much easier if you went about this with hooks. While it may require some refractoring, you could make your api call with a hook, which is a ton simpler to get up and running.

这篇关于我如何在提交表单时将结果重定向到 React 中的另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！