2014-01-10 12 views
7

別のコンポーネントを介してレンダリングされたボタンを取得して、別のコンポーネントの状態を参照したり、影響を与えたりしようとしています。別のコンポーネントでJS参照関数に反応する

var Inputs = React.createClass({ 
    getInitialState: function(){ 
    return {count: 1}; 
    }, 
    add: function(){ 
    this.setState({ 
     count: this.state.count + 1 
    }); 
    }, 
    render: function(){ 
    var items = []; 
    var inputs; 
     for (var i = 0; i < this.state.count; i++){ 
     items.push(<input type="text" name={[i]} />); 
     items.push(<br />); 
     } 
    return (
     <div className="col-md-9"> 
     <form action="/" method="post" name="form1"> 
      {items} 
      <input type="submit" className="btn btn-success" value="Submit Form" /> 
     </form> 
     </div> 
    ); 
    } 
}); 

Inputのadd関数にアクセスできる新しいコンポーネントを作成したいとします。私はこのようにInputs.addで直接参照しようとしました:

var Add = React.createClass({ 
    render: function(){ 
    return (
     <input type="button" className="btn" value="Add an Input" onClick={Inputs.add} /> 
    ); 
    } 
}); 

しかし、それはうまくいきませんでした。他のコンポーネントを介してコンポーネントの機能にアクセスするにはどうすればいいのですか、別のコンポーネントを介してコンポーネントの状態に影響を与えることはできますか?ありがとう。

答えて

9

これは、状態の管理を担当する親コンポーネントを作成し、その状態を小道具としてサブコンポーネントにプッシュすることで実現できます。

/** @jsx React.DOM */ 

var Inputs = React.createClass({ 

    render: function() { 
     var items = []; 
     var inputs; 
     for (var i = 0; i < this.props.count; i++) { 
      items.push(<input type="text" name={[i]} />); 
      items.push(<br />); 
     } 
     return ( 
      <div className = "col-md-9"> 
       <form action = "/" method = "post" name = "form1"> 
        {items} 
        <input type="submit" className="btn btn-success" value = "Submit Form" />    
       </form> 
      </div> 
     ); 
    } 
}); 

var Add = React.createClass({ 
    render: function() { 
     return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/>); 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return {count:1} 
    }, 
    addInput: function(){ 
     var newCount = this.state.count + 1; 
     this.setState({count: newCount}); 
    }, 
    render: function(){ 
     return (
      <div> 
       <Inputs count={this.state.count}></Inputs> 
       <Add fnClick={this.addInput}/> 
      </div> 
     ); 
    } 
}); 

React.renderComponent(<Parent></Parent> , document.body); 

jsFiddle

+1

私はすでに親子コンポーネントのセットアップを行っていましたが、子プロセスに親の関数を使用させるための詳細については問題がありました。この答えは、小道具としての機能を渡すことに役立ったので、ありがとう。 – redlena

1

あなたはrenderComponentの戻り値に関数を呼び出すことができます。

var Inputs = React.createClass({…}); 
var myInputs = React.renderComponent(Inputs); 
myInputs.add(); 

リアクトの外にリアクトコンポーネントのインスタンスへのハンドルを取得する唯一の方法は、リターンを格納することですReact.renderComponentの値。 Source

関連する問題