Невозможно передать родительские методы дочерним компонентам в 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 переменной за пределами области видимости функции, и ссылаться на это таким образом.

Я бы рекомендовал прочитать немного больше о сфере применения this в Javascript.