Question

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

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

一切都在precompilex jsx版本中完美运行。但是，只要我尝试“实时”编译版本，onClick事件只能运行一次。

要使其适用于其他元素，我需要重新加载页面。

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

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

我正在使用最新的反应版本：

<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

来源：

var Bilder = React.createClass({
  getInitialState: function() {
    return {
      data:[
              ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild1.jpg'],
              ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild2.jpg'],
              ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild3.jpg'],
              ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild4.jpg'],
              ['5', 'http://localhost/foodoo/app/public/imgs/aichl.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() {
    var scopeThis = this;
    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语句中删除数据到列表节点的映射，然后将组件Class绑定到map回调函数。

...
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>
  );
}

现在

在从jsx编译为js后，只响应onClick事件一次触发

1 个答案: