0
私はLayoutがHeaderの親で、HeaderはLogInコンポーネントに<Link>が含まれていますが、Layout、Header、LogIn Componentを持っています。今私が渡したいのは、LayoutコンポーネントからLogInへの小道具です。 は、ここに私のレイアウトコンポーネントです：レスポンスルータv4の親コンポーネントから親コンポーネントへの小道具の受け渡し
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>
);
}
ヘッダーコンポーネントでは、私は両方の小道具にアクセスすることができ、それは次のようになります。私の申し込みコンポーネントには、この小道具のを渡すために
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>
);
}
今私が望むすべてがあるがアクセス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>
);
}
これは正しいアプローチか何か不足しているかどうかわかりません。これは、Reactが最初にいくつかの提案を探している学習プロジェクトです。