小编典典

在React.js中从搜索表单重定向到结果页面

reactjs

我目前正在开发我的第一个reactjs应用程序,并且难以使用react-router-dom从Search组件导航到Results组件。

搜索组件接受来自用户的条目,使用axios执行获取请求并更新其结果状态。

import axios from 'axios';
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import Results from './Results';

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
    };

    this.submit = this.submit.bind(this);
    this.changeTerm = this.changeTerm.bind(this);
  }

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

  submit(event) {
    let url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';
    axios.get(url)
      .then(response => {
        let data = {
          results: response.data,
        };
        this.setState(data);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <input onChange={this.changeTerm}/>
          <Button type="submit" bsStyle="primary">Find</Button>
        </form>
        <Results data={this.state.results}/>
      </div>
    );
  }
}

export default Search;

结果当前显示在搜索组件的正下方,但我想将结果重定向到具有其他URL的新页面。两个页面必须不同,因为它们具有完全不同的结构和样式,并且必须指向不同的url。

是否可以使用React Router将结果从“搜索”组件转发到“结果”组件?我也对不基于React Router的其他解决方案持开放态度。


阅读 285

收藏
2020-07-22

共1个答案

小编典典

您是否签出了重定向组件?这是一个基本概念(无需实际测试),可以帮助您入门。显然,您必须添加更多代码才能使其正常工作。

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
    };

    this.submit = this.submit.bind(this);
    this.changeTerm = this.changeTerm.bind(this);
  }

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

  submit(event) {
    let url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';
    axios.get(url)
      .then(response => {
        let data = {
          results: response.data,
        };
        this.setState(data);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <input onChange={this.changeTerm}/>
          <Button type="submit" bsStyle="primary">Find</Button>
        </form>
        {this.state.results.length > 0 &&
          <Redirect to={{
            pathname: '/results',
            state: { results: this.state.results }
          }}/>
        }
      </div>
    );
  }
}

export default Search;
2020-07-22