Requisiten/Status an die/von der Elternkomponente übergeben

Question

Also habe ich eine Elternkomponente und eine Login-Komponente.

Ich möchte der Benutzer ihre Details eingeben und dann auf Senden und dann speichern/übergeben Sie diese Details herum, so dass sie von anderen Komponenten verwendet werden können.

Wie ist das am besten in React getan?

zum Beispiel habe ich dieses Eingabefeld in meinem Log-in-Komponente

<p> 
    <input type="text" id="playerName" value={this.props.nameValue} onChange={this.props.handleNameChange}/> 
</p> 

Dann möchte ich den Wert zu übergeben, die an die Mutterkomponente eingegeben wird

Ich habe diese Funktion in meinem Stammkomponente:

handleNameChange(event){ 
    this.setState({nameValue: event.target.value}) 
    }; 

und in meiner Rückkehr habe ich:

return (
     <div> 
     <LoginPage handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)}/> 
     </div> 
    ) 

Wie auch immer, wenn ich console.log (NameValue) bekomme ich undefiniert. irgendwelche Ideen? kann bei Bedarf mehr Code hinzufügen/relevant

Answer 1

Von Ihrem Beispiel ist man nie nameValue das Kind Komponente zu übergeben.

aktualisiert Ihr Beispiel für die LoginPage Rendering, über Requisiten this.state.nameValue in die untergeordnete Komponente übergeben:

return (
    <div> 
    <LoginPage 
     handleClick={this.handleClick.bind(this)} 
     handleNameChange={this.handleNameChange.bind(this)} 
     nameValue={this.state.nameValue} 
    /> 
    </div> 
) 

Answer 2

Ihr Ansatz mit Staat und Requisiten ist in Ordnung. Sind Sie sicher, dass Sie nicht nur mit ...

sollten

console.log(this.state.nameValue); 

Dies ist ein funktionierendes Beispiel

class Parent extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      nameValue:'' 
     }; 
    } 
    render() { 
     return (
      <Child handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)} nameValue={this.state.nameValue} /> 
     ); 
    } 
    handleNameChange(e) { 
     this.setState({ 
      nameValue: e.target.value 
     }); 
    } 
    handleClick() { 
     alert(this.state.nameValue); 
    } 
} 

class Child extends React.Component { 
    render() { 
    return (
     <div> 
      <input type="text" value={this.props.nameValue} onChange={this.props.handleNameChange} /> 
      <button onClick={this.props.handleClick}>Click Me!</button> 
     </div> 
    ); 
    } 
} 

JSFiddle here.