javascript - 从 jsx 编译到 js 后 react onClick 事件只能触发一次

Question

我有一个构建图像列表的组件，每个数组条目上有 2 个按钮。

2 个按钮中的一个有一个 onClick 事件，该事件会更新其 parentComponent 以便在更大的 View 中显示图像。

一切都在预编译 jsx 版本中完美运行。但是一旦我尝试了“实时”编译版本，onClick 事件就只工作一次。

为了让它在另一个元素上工作，我需要重新加载页面。

我没有收到任何控制台错误。不知道错误可能出在哪里。

如果您想重新创建它，您可以粘贴代码并创建一个 ID 为“bilder”的 div。

我正在使用最新的 React 版本:

<script src="some-react-CDN-0.13.3.js"></script>
<script src="some-react-CDN/JSXTransformer-0.13.3.js"></script>

这是来源:

var Bilder = React.createClass({
  getInitialState: function() {
    return {
      data:[
              ['1', '/app/public/imgs/image.jpg', 'bild1.jpg'],
              ['2', '/app/public/imgs/image.jpg', 'bild2.jpg'],
              ['3', '/app/public/imgs/image.jpg', 'bild3.jpg'],
              ['4', '/app/public/imgs/image.jpg', 'bild4.jpg'],
              ['5', '/app/public/imgs/image.jpg', 'bild5.jpg']
          ],
      currentPic:[],
      display:'showBild clearfix dn',
      displayBg:'darkBg dn'
    };
  },
  showBild: function(e, data){
    this.setState({
      currentPic: e,
      display: 'showBild clearfix db',
      displayBg: 'darkBg db'
    });
  },
  hide: function(){
    this.setState({
      display: 'showBild clearfix dn',
      displayBg: 'darkBg dn'
    });
  },
  render: function() {
    return (
      <div>
        <SingleBild data={this.state.data} chosenBild={this.showBild} />
        <BildDetail hide={this.hide} data={this.state.currentPic} display={this.state.display} displayBg={this.state.displayBg} />
      </div>
    );
  }
});

var SingleBild = React.createClass({
  getInitialState: function() {
    return {
      bild:[]
    };
  },
  showBild: function(data, e){
    e.preventDefault();
    this.props.chosenBild(data);
  },
  render: function() {
    var scopeThis = this;
    var displayBild = function(bild){
         return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={scopeThis.showBild.bind(null, bild)} 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({
  hide: function(){
    this.props.hide();
  },
  render: function() {
    return (
      <div>
        <div className={this.props.display}>
          <img src={this.props.data[1]} alt="" />
          <span>{this.props.data[2]}</span>
          <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>
        <div onClick={this.hide} className={this.props.displayBg}></div>
      </div>
    );
  }
});

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

Answer 1

我认为你应该在 render 的 return 语句中移除数据到列表节点的映射，然后将组件类绑定(bind)到映射回调函数。

...
render: function() {
  var listNodes = this.props.data.map(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>
    )
  }.bind(this));

  return (
    <ul className="dashboardUl bilder clearfix">
      <h2>Gemeldete Bilder:</h2>
      {listNodes}
    </ul>
  );
}

现在