Wie man den Zustand in verschiedenen Dateien an eine Komponente zu einer anderen übergibt

Question

Hallo, ich bin neu in ReactJs. Ich versuche, einfache Form zu bauen.

Sobald wir Formular einreichen müssen den Inhalt aktualisieren.

finden Sie folgenden Code

MainCOmponent

===============

var React = require('react'); 
var FormComp = require('FormComp'); 

var MainComponent = React.createClass({ 
    getInitialState:function(){ 
    return(
    this.state = { 
     name:'Nageshwari' 
    } 
) 
}, 

render:function(){ 
return(
    <div> 
     <h2>Hello {this.state.name} !!!</h2> 
     <FormComp/> 

    </div> 
) 
} 
}); 


module.exports = MainComponent; 

FormComponent

var React = require('react'); 

var FormComp = React.createClass({ 
    onButtonSubmit:function(e){ 
     e.preventDefault(); 
     var name = this.refs.name.value; 
     if(name.length > 0){ 
     this.refs.name.value = ''; 
     return; 
     } 

    }, 
    render:function(){ 
    return(
     <form onSubmit={this.onButtonSubmit}> 
     <input type="text" ref="name"/> 
     <button>Set Name</button> 
     </form> 
    ); 
    } 
}) 

module.exports = FormComp; 

Ich bin immer Nur Anfangszustand erhalten. Der Name wird nach dem Senden des Formulars nicht aktualisiert.

Danke.

Answer 1

vielleicht können Sie Funktion in Hauptkomponente hinzufügen, um die Funktion es wie folgt aussieht:

changeName:function(value){ 
    return(
     this.setState({ 
       name: value 
     })) 
}, 

und Übergang in FormComp Komponente wie folgt aus:

<FormComp changeName={this.changeName} /> 

und Trigger in Ihrer Komponente FormComp:

if(name.length > 0){ 
    this.refs.name.value = ''; 
    this.props.changeName(name); //this one 
    return; 
} 

Dies ist der vollständige Code:

MainComponent:

var React = require('react'); 
var FormComp = require('FormComp'); 

var MainComponent = React.createClass({ 
    getInitialState:function(){ 
    return(
    this.state = { 
     name:'Nageshwari' 
    } 
) 
}, 

changeName:function(value){ 
    return(
     this.setState({ 
       name: value 
     })) 
}, 

render:function(){ 
return(
    <div> 
     <h2>Hello {this.state.name} !!!</h2> 
     <FormComp changeName={this.changeName} /> 

    </div> 
) 
} 
}); 


module.exports = MainComponent; 

FormComp:

var React = require('react'); 

var FormComp = React.createClass({ 
    onButtonSubmit:function(e){ 
     e.preventDefault(); 
     var name = this.refs.name.value; 
     if(name.length > 0){ 
     this.refs.name.value = ''; 
     this.props.changeName(name); 
     return; 
     } 

    }, 
    render:function(){ 
    return(
     <form onSubmit={this.onButtonSubmit}> 
     <input type="text" ref="name"/> 
     <button>Set Name</button> 
     </form> 
    ); 
    } 
}) 

module.exports = FormComp; 

Hoffe, dass es Ihnen helfen kann, mich bemerken, wenn Sie einen Fehler haben, Dank :)

Answer 2

Sie müssen Ihrer Komponente FormComp eine Rückruffunktion hinzufügen.

Dann können Sie diese Callback-Funktion innerhalb onButtonSubmit ausführen und den Status der übergeordneten Komponente aktualisieren.

In Ihrem Stammkomponente würden Sie eine Methode, wie haben:

onFormSubmit(name) { 
    this.setState({ 
     name, 
    }); 
} 

Ich hoffe, das hilft, wenn nicht, mir eine Frage schießen!

Bearbeiten: Erklärung ist, untergeordnete Komponenten nicht magisch den Zustand der übergeordneten Komponente aktualisieren, deshalb benötigen Sie einen Rückruf, damit die übergeordnete Komponente über die Änderung weiß!