как вызвать функцию в родительском компоненте

Question

У меня есть скрипка для этого вопроса here У меня есть компонент FormControl в приложении React.js, в котором я визуализирую несколько разных типов других компонентов. Например, в приведенном ниже коде вы можете увидеть, что я визуализирую CheckBoxWithLabel. Вы заметите, что я передать функцию

onCheck={this.toggleCheckBox} 

так, что в компоненте CheckBoxWithLabel (код не показан), я могу назвать его с событием OnChange (встроенный в случае для флажков в реакции)

onChange={this.props.onCheck} //this code's in the CheckBoxWithLabel 

Таким образом, при щелчке по флажку вызывается функция toggleCheckBox в родительском компоненте, но это работает только для первого CheckBoxWithLabel, показанного ниже, остальные (которые динамически создаются во второй функции возврата) не являются который может быть проверен, и, следовательно, функция toggleCheckBox не будет вызвана.

Почему?

Если вместо того, чтобы пытаться вызвать функцию у родителя, я ответил, что эти компоненты отвечают функцией в компоненте CheckBoxWithLabel, тогда они работают нормально. Только когда я устанавливаю функцию в родительском, что флажки перестают работать, а функция toggleCheckBox не вызывается.

toggleCheckBox: function(){ 
    console.log('toggle'); 
} 
render: function(){ 
     return ( 

      <div> 
      <CheckboxWithLabel labelOn="On" labelOff="Off" item='blah' onCheck={this.toggleCheckBox} /> 
      <ul> 
      { 
      this.props.formElements.map(function(item) { 

      return <CheckboxWithLabel labelOn="On" labelOff="Off" item={item} onCheck={this.toggleCheckBox} /> 

      }) 
      }    
     </ul> 
      </div> 
     ); 
     } 

Answer 1

Функция внутри карты должно быть связано с тем, что он может использовать правильный экземпляр this для извлечения функции:

render: function(){ 
    return ( 
    <div> 
     <CheckboxWithLabel labelOn="On" labelOff="Off" item='blah' onCheck={this.toggleCheckBox} /> 
     <ul> 
     { 
     this.props.formElements.map(function(item) { 
      return <CheckboxWithLabel labelOn="On" labelOff="Off" item={item} onCheck={this.toggleCheckBox} /> 
     }.bind(this)); 
     }    
     </ul> 
    </div> 
); 
}