Friday, 12 May 2017

How return to client side after post data

I've got may be a newbie question, but I can't handle it with myself.

I make some webapp using react and node. Now, I'm doing a register site.:

export default class SignUp extends React.Component {

constructor(props, context) {
    super(props, context);

    this.state = {
        errors: {},
        user: {
            username: '',
            password: '',
            email: ''

        }
    };
    this.processForm = this.processForm.bind(this);
    this.changeUser = this.changeUser.bind(this);
}


processForm(event) {
    event.preventDefault();
    console.log("here!");
    const username = encodeURIComponent(this.state.user.username);
    const email = encodeURIComponent(this.state.user.email);
    const password = encodeURIComponent(this.state.user.password);
    const formData = `username=${username}&password=${password}&email=${email}`;

    $.ajax({
        url: "/register",
        type: "post",
        data: formData,
        success: function (response) {

            this.setState({
                errors: {}
            });
            localStorage.setItem('successMessage', response.message);
            this.context.router.replace('/signin')

        }

    });

}

render() {
    return (

        <div className="container">
            <div className="row main">
                <div className="panel-heading">
                    <div className="panel-title text-center">
                        <h1 className="title">Rejestracja</h1>
                        <hr />
                    </div>
                </div>
                <div className="main-login main-center">
                    <form className="form-horizontal" method="post" action="/register" onSubmit={this.onSubmit} >
                        (...)
                        <div className="form-group ">
                            <button type="submit" className="btn btn-primary btn-lg btn-block login-button">Zarejestruj siÄ™</button>
                        </div>
                        <div className="login-register">
                            <Link to={"signin"}>
                                Zaloguj
                             </Link>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    );
}
}; 

Firstly, I've got app on two ports for react: 3000 and for node: 8080, I use to communicate with server a proxy in package.json file in react.

enter image description here

Secondly, after post my data to the server I retrieve back success but only on server side, but my page don't return to my client side app. To picture my problem I add some screenshot:

enter image description here

So as we can see I get info from server, but without effects on client side. Just ignore the success part on my react's ajax request.

Could someone help me with this problem? If something misunderstanding, please give me know. Thanks in advance.

Cheers.



via user3236398

No comments:

Post a Comment