別のコンポーネントでJS参照関数に反応する

Question

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

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

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

Answer 1

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

/** @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

Answer 2

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

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

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