React.js：將事件從父項添加到子項

，如下面的示例所示，我希望MyComponent動態地將「onClick」事件附加到其子項。 onClick事件應該觸發alertView，該alertView應該能夠調用單擊元素方法「getValue」。React.js：將事件從父項添加到子項

的jsfiddle：http://jsfiddle.net/2g638bp8/

如何做到這一點？謝謝

var MyComponent = React.createClass({ 
    alertValue: function() { 
     // RETRIEVE THE CHILD HERE 
     alert(child.getValue()); 
    }, 
    render: function() { 
     var children = React.Children.map(this.props.children, function (c, index) { 
      return React.addons.cloneWithProps(c, { 
       ref: 'child-' + index 
      }); 
     }); 
     return (
      <div> 
       {children} 
      </div> 
     ); 
    } 
}); 

var MySubComponent = React.createClass({ 
    getValue: function() { 
     return this.props.val; 
    }, 
    render: function() { 
     return (
      <div>{this.props.val}</div> 
     ); 
    } 
}); 

React.render(
    <div> 
     <MyComponent> 
      <MySubComponent val="1" /> 
      <MySubComponent val="2" /> 
      <MySubComponent val="3" /> 
     </MyComponent> 
    </div>, 
    document.getElementById('container') 
);

來源

2015-04-02 pistacchio

您無法在React中的子組件上調用方法。你只能設置屬性。（child實際上是一個ReactElement，它包含關於類和相關屬性的信息，它不是您創建的組件的實例）。

所以，你可以想到這樣slightly different方式和移動onClick到MySubComponent：

var MyComponent = React.createClass({ 
    onHandleGiveValue: function (value) { 
     alert(value); 
    }, 
    render: function() { 
     var self  = this, 
      children = React.Children.map(this.props.children, function (c, index) { 
      return React.addons.cloneWithProps(c, {      
       onGiveValue: self.onHandleGiveValue.bind(self) 
      }); 
     }); 
     return (
      <div> 
       {children} 
      </div> 
     ); 
    } 
}); 

var MySubComponent = React.createClass({ 
    handleClick: function() { 
     this.props.onGiveValue(this.props.val); 
    }, 
    getValue: function() { 
     return this.props.val; 
    }, 
    render: function() { 
     return (
      <div onClick={ this.handleClick } >{this.props.val}</div> 
     ); 
    } 
}); 

React.render(
    <div> 
     <MyComponent> 
      <MySubComponent val="1" /> 
      <MySubComponent val="2" /> 
      <MySubComponent val="3" /> 
     </MyComponent> 
    </div>, 
    document.getElementById('container') 
);

通過這樣做，你的代碼可以通過電流值作爲一個事件到母部件。我從名爲onGiveValue的MySubComponent類創建了一個新事件。目前剛剛通過this.props.val的值。但是，它當然可以是任何東西。

來源

2015-04-02 14:27:54 WiredPrairie

感謝這個有用的答案 - 是現在值得更新它和你的小提琴使用'React.cloneElement'代替..？（由於'cloneWithProps'被棄用） – 2016-08-05 10:31:35

將父回調傳遞給子組件，其中一個不需要子組件的引用。

React更喜歡組合設計模式，所以你的父組件應該包含這三個子組件。 JS小提琴：http://jsfiddle.net/68vt3umg/

var MyComponent = React.createClass({ 
handleChildClick: function (e, childValue) { 
    alert(childValue); 
}, 
render: function() { 
    return (
     <div> 
      <MySubComponent val="1" onSubClicked={this.handleChildClick}/> 
      <MySubComponent val="2" onSubClicked={this.handleChildClick}/> 
     </div> 
    ); 
}}); 

var MySubComponent = React.createClass({ 
    getValue: function() { 
    return this.props.val; 
    }, 
    handleOnClick: function (e, value) { 
    this.props.onSubClicked(e, this.props.val); 
    }, 
    render: function() { 
    return (
     <div onClick={this.handleOnClick}>{this.props.val}</div> 
    ); 
    } 
}); 

React.render(
    <div> 
    <MyComponent /> 
    </div>, 
    document.getElementById('container') 
);

來源

2015-04-02 14:35:11 IcyBright

這與我的回答有何不同？ – WiredPrairie 2015-04-03 10:32:57

沒有孩子傳遞給MyComponent這是OP想要的 – 2017-01-19 10:44:58

React.js：將事件從父項添加到子項

回答

相關問題