response onClick not triggering function

Question

У меня есть этот дочерний компонент, который генерирует элементы списка, содержащие изображение и 2 значка в теге.

return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li> 

Это возвращение является возвратом функции отображения опоры, которая была передана из родительского компонента.

Как-то событие onClick не вызывает функцию showBild.

Я что-то пропустил?

Heres мой весь реагировать код, включая родителей и компонент ребенка (класс showBild можно пренебречь)

<script type="text/jsx"> 
    var Bilder = React.createClass({ 
    getInitialState: function() { 
     return { 
     data:[ 
       ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'], 
       ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'], 
       ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'], 
       ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'], 
       ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'] 
      ], 
     currentPic:[], 
     display:'showBild clearfix dn' 
     }; 
    }, 
    bild: function(){ 

    }, 
    render: function() { 
     return (
     <div> 
      <SingleBild data={this.state.data} chosenBild={this.bild} /> 
      <BildDetail data={this.state.currentPic} display={this.state.display} /> 
     </div> 
    ); 
    } 
    }); 

    var SingleBild = React.createClass({ 
    getInitialState: function() { 
     return { 
     bild:[] 
     }; 
    }, 
    showBild: function(e){ 
     e.preventDefault(); 
     alert("yolo"); 
     this.props.chosenBild(this.state.bild); 
    }, 
    render: function() { 
     var displayBild = function(bild){ 
      return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li> 
     }; 
     return (
     <ul className="dashboardUl bilder clearfix"> 
      <h2>Gemeldete Bilder:</h2> 
      {this.props.data.map(displayBild)} 
     </ul> 
    ); 
    } 

    }); 

    var BildDetail = React.createClass({ 

    render: function() { 
     return (
     <div className={this.props.display}> 
      <img src={this.props.data[1]} alt="" /> 
      <ul> 
      <li><a href="#"><i className="fa fa-trash-o"></i></a></li> 
      <li><a href="#"><i className="fa fa-ban"></i></a></li> 
      </ul> 
     </div> 
    ); 
    } 

    }); 


    React.render(<Bilder />, document.getElementById('bilder')); 
</script> 

Answer 1

В render методе BildDetail, вы должны ссылаться на this ключевое слово или связать его. Например:

render: function() { 
    var self = this; 
    var displayBild = function(bild){ 
     return <li>...<a onClick={self.showBild} ....</a></li> 
    }; 
    return (
    .... 
); 
} 

или вы можете связать его:

render: function() { 
    var displayBild = function(bild){ 
     return <li>...<a onClick={this.showBild} ....</a></li> 
    }.bind(this); 
    return (
    .... 
); 
}