Reagieren und Methoden in untergeordneten Komponenten

Question

Ich versuche React zu lernen. In meiner App.jsx habe ich meine Routen eingerichtet. Und sie arbeiten. Eine meiner Komponenten ist eine Anmeldekomponente. Wenn ich auf den Anmelde-Button klicke, muss ich einen sogar auf die App feuern. Also habe ich eine Funktion erstellt und möchte einen Parameter an die SignIn-Komponente übergeben, damit ich das Ereignis von der Anmeldung aus aufrufen kann. Ich bin mir jedoch nicht sicher, wie ich die Funktion mithilfe von Routen an die Komponente übergeben kann.

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> 
     ) 
    } 
} 

Meine Anmeldeseite ist nur:

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> 
     ) 
    } 
} 

Hier glaube ich, Requisiten, die Methode bekommen verwenden kann, und es dann zu meinem Signin Kalibern.

Meine Anmeldebox ist das Formular, und hier möchte ich den Benutzernamen und das Passwort zurück an die App übergeben, um zu bestätigen. Ich muss es zur App bringen, da ich dann meine Navbar aktualisieren möchte, um die Login-Schaltfläche zu verbergen, und eine Logout-Schaltfläche anzeigen.

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> 
     ); 
    } 
} 

Ich denke, es ist falsch, das Schild in der Methode in der App zu haben, wie es auf die Singin Seite beschränkt sein soll - aber wie kann ich dann die navbar aktualisieren? Die App.jsx ist das übergeordnete Element aller Komponenten.

(Arbeitscode: https://github.com/CraigInBrisbane/ReactLearning)

Wie ich damit umgehen sollte.

Answer 1

Anstelle der Verwendung von component Verwendung render, überprüfen Sie die DOC für Differenz.

Übergeben Sie die Funktion wie folgt aus:

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

Und innerhalb SignIn Komponente können Sie Funktion durch this.props.validate()

Vorschlag: Bessere Ansatz redux/flux für das Datenmanagement zu verwenden wäre, wird es helfen Sie können auch Daten von verschiedenen Seiten und in verschiedenen anderen Szenarien weitergeben und darauf zugreifen.

Prüfen Redux Docs.

Answer 2

Sie können eine Funktion aus der Eltern wie folgt an:

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> 
     ) 
    } 
} 

Und das Kind Komponente wird wie folgt dar:

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

     </div> 
    } 
}