Passing props from parent component with Link to child component in react router v4
Question
I have Layout, Header and LogIn Component where Layout is parent to Header while Header contains <Link> to LogIn component. Now all I want to pass is a props to LogIn from Layout component. Here is my Layout Component:
signup(email, password) {
return this.handleAuth(when(request({
url: 'http://localhost:3001/users',
method: 'POST',
crossOrigin: true,
type: 'json',
data: {
"user":{"email":email,"password":password} }
})));
}
handleAuth(loginPromise) {
return loginPromise
.then(function(response){
jwt = response.jwt;
localStorage.setItem('jwt', jwt);
this.setState({isLoggedIn:true});
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React on Rails API</h2>
</div>
<Body />
<Header signUp={this.signup.bind(this)} logIn={this.login.bind(this)}/><br/><br/>
<Footer/>
</div>
);
}
In Header Component I can access both the props and it looks like this:
render() {
console.log(this.props.signUp);
return (
<header>
<br/>
<div className="container">
<div className="row">
<Link to='login' className="button six columns">SignIn</Link>
<Link to='signup' className="button six columns">SignUp</Link>
</div>
</div>
</header>
);
}
Now all I want is to pass this props to my Signup Component to access this.props.signUp .
signup(e) {
e.preventDefault();
console.log(this.state.registerValues);
this.props.signUp(this.state.registerValues.email,this.state.registerValues.password, this.state.registerValues.conform)
.catch(function(err) {
console.log("Error logging in", err);
});
}
render() {
return (
<div className="row">
<div className="three column"></div>
<div className="six columns">
<h1>Signup</h1>
<form>
<div className="form-group">
<label htmlFor="username">Email</label>
<input type="text" value={this.state.registerValues['email']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="email" placeholder="email" required/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" value={this.state.registerValues['password']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="password" id="password" ref="password" placeholder="Password" required />
</div>
<div className="form-group">
<label htmlFor="password">Password again</label>
<input type="password" value={this.state.registerValues['conform']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="conform" placeholder="Password again" required/>
</div>
<button type="submit" className="btn btn-default" onClick={this.signup.bind(this)}>Submit</button>
</form>
</div>
<div className="three column"></div>
</div>
);
}
I am not sure if this is right approach or missing something? Since this is my learning project first for React looking for some suggestion.
1 answers
solution1
0 2017-06-16 16:05:16
Essentially, you can't pass a method through a Link component. You can pass down methods when you are rendering the Route components, but other than that not much else you can do. Example
If that is something you are able to accomplish with the structure of your react components, great! If not, I suggest you look into doing some sort of pub/sub functionality, like redux (or roll your own if your need is simple enough).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.