从搜索表单重定向到 reactjs 中的结果页面
Redirecting from a search form to a results page in reactjs
我目前正在开发我的第一个 reactjs 应用程序,并且在使用 react-router-dom.
从搜索组件导航到结果组件时遇到困难
搜索组件接受来自用户的条目,使用 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 的新页面。两个页面必须不同,因为它们具有完全不同的结构和样式并且必须指向不同的 urls.
是否可以使用react router将搜索组件的结果转发到结果组件?我也对其他不基于 React 路由器的解决方案持开放态度。
您检查过 Redirect 组件了吗?这是一个可以帮助您入门的基本想法(无需实际测试)。您显然必须添加更多代码才能使其正常工作。
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;
我使用了相同的代码,但结果数据没有重定向到搜索结果页面。我在下面添加了 result.js
{this.state.results.id}
我目前正在开发我的第一个 reactjs 应用程序,并且在使用 react-router-dom.
从搜索组件导航到结果组件时遇到困难搜索组件接受来自用户的条目,使用 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 的新页面。两个页面必须不同,因为它们具有完全不同的结构和样式并且必须指向不同的 urls.
是否可以使用react router将搜索组件的结果转发到结果组件?我也对其他不基于 React 路由器的解决方案持开放态度。
您检查过 Redirect 组件了吗?这是一个可以帮助您入门的基本想法(无需实际测试)。您显然必须添加更多代码才能使其正常工作。
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;
我使用了相同的代码,但结果数据没有重定向到搜索结果页面。我在下面添加了 result.js
{this.state.results.id}