javascript - react onClick 不触发功能

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>

这个返回是父组件传过来的prop的map函数的返回。

不知何故，onClick 事件没有触发我的 showBild 函数。

我错过了什么吗？

这是我的整个 react 代码，包括父组件和子组件(可以忽略 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

在BildDetail的render方法中，需要引用this关键字或者绑定(bind)。例如:

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

或者你可以绑定(bind)它:

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