javascript - 从导航栏过滤反应组件
问题描述
我正在尝试在我的导航栏中实现一个搜索栏,它将为我带来一个城市列表,并且根据所选城市它必须更新主页中的优惠列表,因为优惠是按城市过滤的,事情也就是说,导航栏是一个组件,而报价在另一个组件中,如果我在导航栏中搜索一个城市并按回车,报价组件如何监听它并根据搜索到的城市调用 api?这是我的代码:
导航栏:
class NavigationBar extends React.Component {
constructor(props) {
super(props);
this.cityoffer = this.cityoffer.bind(this);
}
cityoffer(e) {
e.preventDefault();
this.props.history.push("/home");
console.log("cities");
}
render(){
const { isAuthenticated } = this.props.auth;
const userLinks = (
<form className="form-inline my-2 my-lg-0 ml-auto" onSubmit={this.cityoffer}>
<input className="form-control mr-sm-2" type="search" placeholder="Cidade" aria-label="Search"/>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Procurar</button>
</form>
);
const guestLinks = (
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/login" className="nav-link">Entrar</Link>
</li>
<li className="nav-item">
<Link to="/signup" className="nav-link">Registrar</Link>
</li>
</ul>
);
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<button className="navbar-brand brandbutton" onClick={this.brand}><img src={imglogo} className="imagemNav" alt="logo"/></button>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="navbar-collapse collapse w-100 order-3 dual-collapse2" id="navbarNavAltMarkup">
{ isAuthenticated ? userLinks : guestLinks }
</div>
</nav>
);
}
}
NavigationBar.propTypes = {
auth: PropTypes.object.isRequired,
logout: PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
auth: state.auth
};
}
export default withRouter(connect(mapStateToProps, { logout })(NavigationBar));
优惠:
class Anuncios extends React.Component {
constructor(props){
super(props);
this.state = {
city: 2958,
}
}
componentWillReceiveProps = (nextProps) => {
console.log(nextProps)
}
componentDidMount() {
this.props.fetchAnuncios(this.state.city);
}
render() {
return (
<div className="pagemargin">
<AnunciosList anuncios={this.props.anuncios}/>
</div>
);
}
}
Anuncios.propTypes = {
anuncios: PropTypes.array.isRequired,
fetchAnuncios: PropTypes.func.isRequired,
}
function mapStateToProps(state) {
return {
anuncios: state.anuncios
}
}
export default connect(mapStateToProps, {fetchAnuncios, searchCidadesRequestID})(Anuncios);
应用程序:
class App extends Component {
render() {
return (
<div className="App">
<NavigationBar />
<FlashMessagesList/>
</div>
);
}
}
export default App;
路线:
const AppRouter = () => (
<Router>
<div>
<AlertProvider template={AlertTemplate} {...options}>
<App/>
<Switch>
<Route exact path="/" component={Intro}/>
<Route path="/home" component={Home}/>
<Route path="/signup" component={SignUp}/>
<Route path="/login" component={LoginPage}/>
<Route path="/filtrar" component={Filtrar}/>
<Route path="/cupons" component={requireAuth(Cupons)}/>
<Route path="/perfil" component={requireAuth(Perfil)}/>
<Route path="/anuncio/:id" component={AnuncioDetalhes}/>
<Route component={NoMatch}/>
</Switch>
</AlertProvider>
</div>
</Router>
);
像那样:
解决方案
推荐阅读
- android - Android 完整备份:“file.xml 不在包含的路径中”
- kaizala - Microsoft Kaizala 自定义操作导入不起作用
- vba - MSXML2.XMLHTTP 在独立函数中工作,从正在运行的过程调用时访问被拒绝
- javascript - 如何在 AVA 的测试报告中包含之前/之后的钩子?
- python - 使用 NumPy FFT 计算非整数频率
- python - 空文件在 Python 3 中不读取为空
- tkinter - 跨多个类都将小部件发布到主窗口的 tkinter grid() 的正确方法是什么?
- security - 是否可以只允许来自一个网站而不是直接来自一个网站的 CORS?
- string - Python-尝试打印变量并在数字前使用(str),但仍然出现语法错误
- arrays - 从任何控制器快速创建和访问数组