在ReactJS中从子进程调用父类方法

时间:2015-07-09 07:24:10

标签: javascript reactjs

我在ReactJS中遇到了问题 我想从Child类调用 this.props.onAction()方法,但我有一个错误:

  

未捕获的TypeError:this.props.onShotImageClick不是函数

http://jsfiddle.net/01fbL37L/

我希望在父类中动态生成按钮时调用此方法。

var btns = ['aaa', 'bbb', 'ccc']

var Child = React.createClass({
  render: function () {
    return <button onClick={this.handleClick} type="button"> {this.props.text} </button>;
  },
  handleClick: function () {
    this.props.onAction("super text");
  }, 
});

var Parent = React.createClass({
  render: function () {
    var buttons = btns.map(function(btn){
        return <Child onAction={this.superAction} text={btn} />;
    });
    return <p>{buttons}</p>;
  },
  superAction: function (text) {
    alert('The Child button say: ' + text);
  }
});

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

如果我直接在&#34中调用它,请返回&#34;有用.. http://jsfiddle.net/f2ty4jkm/

感谢。

1 个答案:

答案 0 :(得分:0)

this设置为.map回调,因为在您的情况下this引用window而不是Parent对象

 var buttons = btns.map(function(btn) {
     return <Child onAction={this.superAction} text={btn} />;
 }.bind(this));

Example