Как я могу при отправке моей формы перенаправить результаты на другую страницу в React - PullRequest
Новая
       55

Как я могу при отправке моей формы перенаправить результаты на другую страницу в React

1 голос
/ 13 апреля 2019

Я пытаюсь отобразить результаты поиска на другой странице в React Js.Пока, когда я отправляю форму поиска, она будет отображать результаты на той же странице, которая мне не нужна.Я пытался сделать это в течение последних 4 часов (я новичок в ReactJS), и я видел много предложений в Интернете, но, похоже, ничего не работает, как я надеялся.

Я даже пытался использовать реагировать на избыточность, реагировать на маршрутизатор и многое другое в сети, но не работает, не так, что я делаю не так.

Как мне подойти?Я хотел бы, чтобы кто-то, вероятно, поставил меня на правильный путь в отношении кода, который я предоставляю ниже, а также приветствуются ваши предложения / отзывы.

Заранее спасибо.

Вот мойкомпонент поисковой системы, отвечающий за форму 

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;

1 Ответ

1 голос
/ 13 апреля 2019

После получения вызовов 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

. Для этого может потребоваться использовать Router в качестве HOC.Одна вещь, которую я хотел бы изменить, это взять ваш API в componentDidMount.Однако было бы намного проще, если бы вы пошли по этому поводу с крючками.Хотя это может потребовать некоторого рефракторинга, вы можете сделать вызов API с помощью ловушки, которая намного проще в настройке и запуске.

...