无法将父方法传递给React中的子组件

Question

我有一个子组件（一个提交按钮），我想将它放在父项中。我想让孩子访问父母的方法。

儿童：

var SubmitButton = React.createClass({ 
    submitHandler: function(e) { 
    e.preventDefault(); 
    this.props.submitHandler(e); 
    }, 
    render: function() { 
    return (
     <div className="Form--row"> 
     <button onClick={this.submitHandler}>Submit</button> 
     </div> 
    ); 
    } 
}); 

现在，当我叫孩子这个样子，它的工作原理：

var Form = React.createClass({ 
    submitHandler: function(e) { 
     // do something 
    }, 

    render: function() { 
    return(
     <div className={classNames}> 
     <form action="" className="Form"> 
      <SubmitButton submitHandler={this.submitHandler}/> 
     </form> 
     </div> 
    ) 
    } 
}); 

但是，当我尝试填充这个样子，它抛出一个错误：

render: function(e) { 
    return(
     <div className={classNames}> 
      <form action="" className="Form"> 
       {this.props.map(function(input) { 
       if (input.inputType == 'button') { 
        return <SubmitButton submitHandler={this.submitHandler}/>; 
       } 
       }) 
       } 
      </form> 
      </div> 
) 
} 

错误：

Uncaught TypeError: Cannot read property 'submitHandler' of undefined 

我想使第二种方法的工作，以便我可以使用随机孩子填充父项。我在第二个片段中做错了什么？

Answer 1

你的问题就在这里：

{this.props.map(function(input) { 
      if (input.inputType == 'button') { 
       return <SubmitButton submitHandler={this.submitHandler}/>; 
      } 
      }) 

this现在在你的函数，而不是你的组件的范围，因此该方法不会在this对象上存在。

var that = this; 

{this.props.map(function(input) { 
      if (input.inputType == 'button') { 
       return <SubmitButton submitHandler={that.submitHandler}/>; 
      } 
      }) 

可以的this值分配给变量的函数范围之外，并且参考这种方式。

我建议阅读更多关于在Javascript中的this的范围。