Question

我已经添加了导航到我的反应应用程序，我可以点击链接，新建，进入新页面提交我的表单。

但是，如何将我的状态传递给此页面？首先是formost，这是我使用反应的第3天，所以我很可能做错了：

在main.js中，我已经宣布了我的路线：

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}/>
        <Route path="/submit" component={NewLink}/>
        <Route path="*" component={NotExist}/>
    </Router>
)

在我的App组件中，我只有两个主要组件（其中包含更多组件）：

render : function() {
        return (
            <div>
                <TopNav />

                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

因此，主页面显示所有链接（类似于网页reddit），并从导航栏显示newLinkForm，用户可以创建新链接。但是，我怎么能在这里发送我的州？通过TopNav组件？

新更新的代码：

main.js

import React from 'react';
import ReactDOM from 'react-dom';


/*
    Router components
*/
import {Router,Route} from 'react-router';
import {createHistory} from 'history';

import NotFound from './components/NotFound';
import App from './components/App';
import CreatePost from './components/CreatePost';

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={CreatePost}/>
        </Route>

        <Route path="*" component={NotFound}/>
    </Router>
)

ReactDOM.render(routes, document.querySelector('#main'));

App.js

import React from 'react';

import NavigationBar from './NavigationBar';
import CreatePost from './CreatePost';
import DisplayPosts from './DisplayPosts';
import NewPostForm from './NewPostForm';

var App = React.createClass({
    getInitialState : function() {
        return {
            posts : {}
        }       
    },
    componentDidMount : function() {        

        var my_localStorage = localStorage.getItem('post-');

        if(my_localStorage) {
            // update component state to reflect what is in local storage
            this.setState({posts : JSON.parse(my_localStorage)});
        }
    },
    componentWillUpdate : function(nextProps, nextState) {
        localStorage.setItem('post-' , JSON.stringify(nextState.posts));
    },
    addPostToPosts : function(post) {
        //console.log(post);
        var timestamp = (new Date().getTime()); //research how to use uuid instead 
        this.state.posts[timestamp] = post;
        this.setState({ posts : this.state.posts });
        //console.log("key is " + Object.keys(this.state.posts));
    },
    render : function() {
        //<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
        return (
            <div>
                <NavigationBar/>
                    {this.props.children}
                <DisplayPosts postData={this.state.posts} />
            </div>
        )
    }
});

export default App;

NavigationBar.js

import React from 'react';
import {Navbar,Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';

var NavigationBar = new React.createClass({

    render : function() {
        return(
            <Navbar className="my-navbar">
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">Main React</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                  <NavItem eventKey={1} href="/submit">New Post</NavItem>                 
                </Nav>
            </Navbar.Collapse>
          </Navbar>         
        )
    }
});

export default NavigationBar

NewPostForm.js

import React from 'react';
import {History} from 'react-router';

var NewPostForm = React.createClass({
    goBack : function(e) {
        e.preventDefault();
        console.log(this.history);
        //this.history.goBack();
    },
    mixins : [History],
    createNewPost : function(e) {
        e.preventDefault();
        //alert("pressed submit");
        if((this.refs.title.value).length === 0 || (this.refs.message.value).length === 0 || (this.refs.image).length === 0) {
            alert("Please fill out all fields!");
        }
        else {
            //alert("yay");
            //create new post object and send it to parent this.state.posts
            var post = {
                title : this.refs.title.value,
                message : this.refs.message.value,
                image : this.refs.image.value
            }
            //console.log(post);
            this.props.addPostToPosts(post);
            this.refs.newPostForm.reset();
        }
    },  
    render : function() {
        //make this to react bootstrp
        return (
            <form className="new-post-form" ref="newPostForm" onSubmit={this.createNewPost}>
                <div className="form-group">
                    <label>Title</label>
                    <input className="form-control" type="text" ref="title" placeholder="Title" />
                </div>
                <div className="form-group">
                    <label>Message</label>
                    <textarea className="form-control" type="text" ref="message" placeholder="Share your message" />
                </div>
                <div className="form-group">
                    <label>Image</label>
                    <input className="form-control" type="text" ref="image" placeholder="Share an image URL" />
                </div>
                <button type="submit" className="npf-btn btn btn-primary">Submit</button>               
                <button type="button" className="npf-btn btn btn-default" onClick={this.goBack}>Cancel</button>         
            </form>
        )
    }
});

export default NewPostForm;

CreatePost.js

import React from 'react';
import NewPostForm from './NewPostForm';

var CreatePost = React.createClass({

    render : function() {
        return (
            <NewPostForm addPostToPosts={this.props.addPostToPosts}/>
        )
    }
});

export default CreatePost;

Answer 1

不确定这会回答你的问题，但我认为你更多地询问如何处理导航而不是任何形式的状态。

由于您尝试创建新链接，因此似乎没有理由让您通过状态。我想你真正要问的是：

如何让我的TopNav和我的ShowLinks组件也出现在我的新/submit页面上。

这个问题的答案很简单。你可以嵌套路线。

对我而言，您尝试做的似乎是：

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={NewLink}/>
        </Route>

        <Route path="*" component={NotExist}/>
    </Router>
)

通过将NewLink与App组件包装在一起，您可以使用已设置的导航布局，然后传递道具。

render : function() {
        return (
            <div>
                <TopNav />
                {this.props.children}
                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

我添加的行{this.props.children}，您可以将其视为您的子组件现在将呈现的位置。因此，当您访问/submit时，您将同时使用App组件和NewLink组件内部。

希望这就是你要找的东西：）

reactJS如何在转到另一个URL时传递状态？（单击导航栏上的“新建”转到“提交表单”）

1 个答案:

reactJS如何在转到另一个URL时传递状态？ （单击导航栏上的“新建”转到“提交表单”）

1 个答案:

reactJS如何在转到另一个URL时传递状态？（单击导航栏上的“新建”转到“提交表单”）