異なるファイル内のあるコンポーネントに状態を渡す方法

Question

こんにちは、私はReactJsを初めて使用しています。私はシンプルなフォームを作成するつもりです。

フォームを送信したら、コンテンツを更新する必要があります。

見つけてくださいコード私はいつも午前

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; 

FormComponent

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; 

=============== MainCOmponent

以下初期状態のみを取得します。フォームを送信した後に名前を更新しない。

ありがとうございました。

Answer 1

多分あなたは、主成分で、それはこのように見える機能を機能を追加することができます。

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

と、このようにFormCompコンポーネントに渡す：コンポーネントFormCompに

<FormComp changeName={this.changeName} /> 

をトリガー：

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

これは完全なコードです：

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; 

は、私はちょうど、あなたがエラーを持っている場合、下記の感謝:)

Answer 2

FormCompコンポーネントにコールバック関数を追加する必要があります。

次に、そのコールバック関数をonButtonSubmit内で実行し、親コンポーネントの状態を更新できます。あなたの親コンポーネントで

次のような方法があります：

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

私がいない場合は、私に質問を撃つ、このことができます願っています！

編集：説明：子コンポーネントは親コンポーネントの状態を魔法のように更新しないため、親コンポーネントが変更を知るためにコールバックが必要です。