子要素内の反応とメソッド

Question

私はReactを学ぼうとしています。私のApp.jsxでは、ルートを設定しています。そして、彼らは働く。私のコンポーネントの1つはサインインコンポーネントです。サインインボタンをクリックすると、アプリでさえも発射する必要があります。だから、私は関数を作成し、サインインからイベントを呼び出すことができるように、SignInコンポーネントにパラメータを渡したいと思います。しかし、ルートを使ってコンポーネントに関数を渡す方法がわかりません。

export default class App extends React.Component { 

    handleLogin() { 
     console.log("Ahhhh") 
    } 

    render() { 
     return (
      <div> 
       <Router> 
        <div> 
         <Route exact path='/' component={Home} /> 
         <Route path='/about' component={About} /> 
         <Route path='/contact' component={Contact} /> 
         <Route path="/signin" component={SignIn} /> 
         <Route path="/register" component={Register} /> 
        </div> 
       </Router> 
       <Footer /> 

      </div> 
     ) 
    } 
} 

ページでの私のサインがちょうどです：

ここ

export default class SignIn extends Component { 
    render() { 
     return (
      <div> 
      <Navbar /> 
      <div className="row justify-content-md-center"> 
       <div className="col-lg-4"> 
        <SignInBox /> 
       </div> 
      </div> 
      </div> 
     ) 
    } 
} 

私はメソッドを取得するために小道具を使用してから、私のサインインもボックスにそれを渡すことができると思います。

私のサインボックスはフォームです。ここでは、検証するためにユーザー名とパスワードをアプリケーションに戻したいと思います。私はログインボタンを隠すためにナビゲーションバーを更新し、ログアウトボタンを表示したいので、Appにそれを取得する必要があります。

export default class SignInBox extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      username: '', 
      password: '', 
      rememberme: true 
     } 

     this.handleSignin = this.handleSignin.bind(this); 
    } 

    handleSignin(event) { 
     event.preventDefault(); 

     this.setState(
      { 
       username: this.refs.username.value, 
       password: this.refs.password.value 
      },() => console.log(this.state) 
     ); 
    } 

    render() { 
     return (
      <div> 
       <div className="container"> 
        <div className="form-signin"> 
         <control-label for="inputEmail" className="sr-only">Email address</control-label> 
         <input type="email" ref="username" id="inputEmail" className="form-control" placeholder="Email address" required autoFocus /> 
         <control-label for="inputPassword" className="sr-only">Password</control-label> 
         <input type="password" ref="password" id="inputPassword" className="form-control" placeholder="Password" required /> 
         <div className="checkbox"> 
          <control-label> 
           <input type="checkbox" /> Remember me 
          </control-label> 
         </div> 
         <button className="btn btn-lg btn-primary btn-block" type="button" onClick={this.handleSignin}>Sign in</button> 
         <div className="footer-text"><Link to="/"> Forgotten Password?</Link></div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

私はそれが唄えページに限定されなければならないとして、それは、アプリケーションでの方法で看板を持っているのは間違いだと思う - しかし、どのように私は、ナビゲーションバーを更新することができますか？ App.jsxはすべてのコンポーネントの親です。

（ワーキングコード：https://github.com/CraigInBrisbane/ReactLearning）私はこれをどのように処理するか

。

Answer 1

代わりのcomponent使用renderを使用して、違いをDOCをご確認ください。

次のように関数を渡す：

<Route 
    path="/signin" 
    render={props => <SignIn validate={this._validate} {...props} />} 
/> 

そしてSignInコンポーネント内に、あなたはthis.props.validate()

提案によって機能にアクセスできます。より良いアプローチは、データ管理のためのredux/fluxを使用することです、それが役立ちます異なるページやさまざまなシナリオのデータにもアクセスしてアクセスできます。

チェックRedux Docsです。

Answer 2

あなたは、このような親から機能を送ることができます。以下のように

class App extends Component{ 
    constructor(props){ 
     super(props); 
     this.someFn = this.someFn.bind(this); 
    } 
    function someFn(data){ 
     ...do something... 
    } 
    render(){ 
     return(
      <div> 
       <Route path="/example" render={() => { 
        <Child someFn={this.someFn} />; 
       }} /> 
      </div> 
     ) 
    } 
} 

と子コンポーネントは次のとおりです。

class Child extends Component{ 
    render(){ 
     <div onClick={this.props.someFn(this, data)}> 

     </div> 
    } 
}