Запрос API и перенаправление на страницу результатов для панели поиска (компонента) в приложении React

Поэтому я испытываю трудности при попытке создать компонент поиска для запроса данных из моего запроса API через Axios. Прямо сейчас это просто заполняет окно предупреждения.

Он должен сделать несколько вещей, сравнить данные из запроса с данными из API, передать сопоставленные данные в качестве реквизитов на страницу результатов и перенаправить на эту страницу результатов, чтобы показать эти результаты. Приложение развернуто здесь https://suite-search-lk.surge.sh/

Как я должен идти об этом? Ценю любую помощь:D

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("The following value was submitted: " + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <SearchDiv>
        <form onSubmit={this.handleSubmit} className="searchBoxWrapper">
          <div>
            <input
              className="searchQuery"
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
              placeholder="Teacher"
            />
          </div>
          <div className="submitWrapper">
            <input className="submitBtn" type="submit" value="Search" />
          </div>
        </form>
      </SearchDiv>
    );
  }
}

0 ответов

Другие вопросы по тегам