Реагировать на клик не вызывая функцию

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.

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

Вот весь мой код реакции, включая родительский и дочерний компоненты (класс 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 (
    ....
  );
}