Question

编辑：添加了要查看的组件

我正在尝试根据搜索中的提交按钮呈现正确的页面视图。目前，我在视图顶部有一个搜索栏，中间有一个默认登录页面。当用户搜索时，我想将默认目标网页更改为他们正在搜索的个人资料页面。

我假设我必须从Main中删除组件并将其替换为{this.props.children}。然后在我将不得不添加可能周围的提交按钮？到目前为止，问题是Profile然后没有从SearchBar获得所需的道具。

理想情况下，我的视图会显示在顶部和主容器中。当用户搜索将改为包含搜索到的正确用户信息时，将从 - > - ＆GT;

以下是我目前的Routs和主要组件

import React, { Component } from 'react';
import Routes from '../utils/Routes';
import Footer from './Footer';
import Profile from './Profile';
import SearchBar from './SearchBar';
import Landing from './Landing';

class Main extends Component {
    constructor(props) {
         super(props);
         this.state = { 
             profileName: ''
         }
       }

       handleProfileChange(profileName) {
         this.setState( { profileName });
         //replace <Profile /> with  {this.props.children} maybe
       }

    render() {
        return (
            <div className="container-fluid">
                <div className="row">
                    <SearchBar history={this.props.history} handleProfileChange={this.handleProfileChange.bind(this)} />
                </div>
                <div className="row">
                     <Profile name={this.state.profileName} />
                </div>
                <div className="row">
                    <Footer />
                </div>
            </div>
        )
    }
}


export default Main;

主要

import React, { Component, PropTypes } from 'react';
import Profile from './Profile';
import TopNav from './TopNav';
import sass from '../scss/application.scss';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 



class SearchBar extends Component {
    constructor(props){
        super(props)
            this.state = {
                name: ''
            }
    }   

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

    handleSubmit(e) {
        e.preventDefault();
        console.log("searching for NAME " + this.state.name);
        let profileName = this.state.name;
        profileName = profileName.toLowerCase().trim();
        //Cap the first letter in the name and add the rest of the name 
        profileName = profileName.charAt(0).toUpperCase() + profileName.substr(1);
        console.log("NEW NAME " + profileName);
        this.props.handleProfileChange(profileName);
        }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <input type="text" placeholder="Enter Name" 
                    name="name" 
                    value={this.state.name} 
                    onChange={this.handleChange.bind(this)} />
                    <button className="btn btn-success" type="submit">Search</button>
                </form> 
            </div>
        )
    }
}

SearchBar.propTypes = {
  handleProfileChange: React.PropTypes.func.isRequired,
}

export default SearchBar;

搜索栏

{{1}}

Answer 1

如果我理解正确的话，这是一个基本草图。这将是搜索栏和提交。

<Route path="/profiles/:search" component={Profile} />

但是，您必须为搜索添加路线。

{{1}}

React路由器将登陆视图更改为搜索结果视图

1 个答案: