从搜索表单重定向到 reactjs 中的结果页面 [英] Redirecting from a search form to a results page in reactjs

问题描述

我目前正在开发我的第一个 reactjs 应用程序，但在使用 react-router-dom 从搜索组件导航到结果组件时遇到了困难.

搜索组件接受来自用户的条目，使用 axios 执行 get 请求并更新其结果状态.

从'axios'导入axios；从反应"导入反应，{组件}；从 'react-bootstrap' 导入 {Button}；从'./Results'导入结果；类搜索扩展组件{构造函数(道具){超级(道具)；this.state = {结果: []，学期: ''，};this.submit = this.submit.bind(this);this.changeTerm = this.changeTerm.bind(this);}changeTerm(事件){this.setState({term: event.target.value});}提交(事件){让 url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';axios.get(url).then(响应 => {让数据 = {结果:response.data，};this.setState(data);}).catch(error => console.log(error));}使成为() {返回 (<div><form onSubmit={this.submit}><input onChange={this.changeTerm}/><Button type="submit" bsStyle="primary">Find</Button></表单><结果数据={this.state.results}/>

);}}导出默认搜索；

结果目前直接显示在搜索组件下方，但我想将结果重定向到具有不同网址的新页面.两个页面必须不同，因为它们具有完全不同的结构和样式，并且必须指向不同的 url.

是否可以使用反应路由器将搜索组件的结果转发到结果组件?我也对其他不基于 React 路由器的解决方案持开放态度.

解决方案

您是否查看了 重定向组件?这是一个应该让你开始的基本想法(没有实际测试).显然，您必须添加更多代码才能使其正常工作.

class Search extends Component {构造函数(道具){超级(道具)；this.state = {结果: []，学期: ''，};this.submit = this.submit.bind(this);this.changeTerm = this.changeTerm.bind(this);}changeTerm(事件){this.setState({term: event.target.value});}提交(事件){让 url = 'http://api.example.com/results?q=' + encodeURI(this.state.term) + '&json=1';axios.get(url).then(响应 => {让数据 = {结果:response.data，};this.setState(data);}).catch(error => console.log(error));}使成为() {返回 (<div><form onSubmit={this.submit}><input onChange={this.changeTerm}/><Button type="submit" bsStyle="primary">Find</Button></表单>{this.state.results.length >0 &&<重定向到={{路径名:'/结果'，状态:{结果:this.state.results}}}/>}

);}}导出默认搜索；

I am currently developing my first reactjs app and am having difficulties navigating from a Search component to a Results component using react-router-dom.

The search component accepts entries from the user, performs a get request with axios and updates its results state.

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;

The results are currently displayed directly beneath the search component, but I would like to redirect the results to a new page with a different url. Both pages have to be different, because they have completely different structures and styles and must point to different urls.

Is it possible to forward the results from the Search component to the Results Component using react router? I am also open to other solutions which are not based on react router.

解决方案

Have you checked out the Redirect component? Here's a basic idea (without actually testing it) that should get you started. You'll obviously have to add some more code to get it working.

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;

这篇关于从搜索表单重定向到 reactjs 中的结果页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！