ReactJS 中的动态 onClick 和渲染

Question

我是 React 新手，我需要一些帮助来解决这个问题！

我有一个 Json 对象：

var exampleJson = {
    title: "title",
    blocks: [
        {
            type: "block1",
            items: [{id: "1", count: 1},
                    {id: "2", count: 1},]
        },
        {
            type: "block2",
            items: [{id: "3", count: 1},
                    {id: "4", count: 1},]
        },
]};

我想获取对象中的每个块并在 div 中呈现每个块内的数据（包括循环访问块内的项目）。 div 应该有一个动态的 onClick 事件，用于记录被点击的块。

这是我得到的：

var BlockListClass = React.createClass({
blockClicked: function() {
    // Here I dont know what block I clicked
},
loopBlocks: function(_data, blockClicked) {
         // loop blocks
        {_data.map(function(object, i){
            var result = <div className="block" key={i}> 
                      {[ 
                         <h2 onClick={blockClicked} key={i}> {object.type} </h2>
                      ]}
                  </div>; 
         // Loop items
         for (var key in object.items) {
              if (object.items.hasOwnProperty(key)) {
               result.props.children.push(<h2 key={key+10}> {object.items[key].id} </h2>);
              }
            }
         return result;
         })}
},
render: function() {
  var _data = exampleJson.blocks;
  var blockClicked = this.blockClicked;
  var renderer = this.loopBlocks(_data,blockClicked);
  return(
    <div className="BlockList">
    {renderer}
    </div>
    );
}

});

然后像这样渲染 BlockListClass：

<BlockListClass />

Answer 1

您问的问题本质上是“如何将参数传递给 React Elements 上的 onClick 事件”。这是你在 React 中必须遵循的常见模式。最简单的方法就是将值绑定到函数调用。即

<h2 onClick={blockClicked.bind(this, i)} key={i}> {object.type} </h2>

那么您的处理程序将如下所示

blockClicked: function(i) {
    console.log(i);
},

如果你还需要访问click事件，那么你可以先传入索引值，然后返回一个onClick事件触发时调用的函数：

<h2 onClick={blockClicked(i)} key={i}> {object.type} </h2>

使用结果处理程序：

blockClicked: function(i) {
  return function(e) {
    console.log(i);
    // do what you want with 'e' 
  }
}

编辑：我还应该注意，我的回答非常笼统。由于您的元素嵌套在 map(function(){...}) 中，因此绑定 'this' 将导致错误。您需要将其绑定到正确的上下文。但是，我认为这超出了这个问题的范围。只是想让您知道您是否遇到该问题。

Answer 2

// 你可以这样做

var BlockListClass = React.createClass({
blockClicked: function(e) {
    var id = e.currentTarget.id;
    console.log(id);
},
loopBlocks: function(_data, blockClicked) {
         // loop blocks
        {_data.map(function(object, i){
            var result = <div className="block" key={i}> 
                      {[ 
                         <h2 onClick={blockClicked} id={i} key={i}> {object.type} </h2>
                      ]}
                  </div>; 
         // Loop items
         for (var key in object.items) {
              if (object.items.hasOwnProperty(key)) {
               result.props.children.push(<h2 key={key+10}> {object.items[key].id} </h2>);
              }
            }
         return result;
         })}
},
render: function() {
  var _data = exampleJson.blocks;
  var blockClicked = this.blockClicked;
  var renderer = this.loopBlocks(_data,blockClicked);
  return(
    <div className="BlockList">
    {renderer}
    </div>
    );
}
});