傳遞來自父組件的道具與鏈接到反應路由器中的子組件v4

我有佈局，標題和登錄組件，其中佈局是父標頭，而標頭包含登錄組件的<Link>。現在我想傳遞的是一個從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> 
    ); 
}

現在我想的是通過這個道具，我註冊的Component訪問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尋找一些建議的學習項目。

來源

2017-06-16 surajnew55

本質上，您不能通過鏈接組件傳遞方法。在渲染Route組件時，您可以傳遞方法，但除此之外您可以執行其他任何操作。 Example

如果這是你能夠用反應組件的結構完成的事情，太棒了！如果不是這樣，我建議你考慮做一些pub/sub功能，比如redux（或者如果你的需求足夠簡單，請自行推出）。

來源

2017-06-16 16:05:16

傳遞來自父組件的道具與鏈接到反應路由器中的子組件v4

回答

相關問題