javascript - 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},]
        },
]};

我想获取对象中的每个 block ，并在 div 中渲染每个 block 内的数据(包括循环访问 block 内的项目)。 div 应该有一个动态 onClick 事件，用于注册单击的 block 。

这就是我得到的:

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 中必须遵循的常见模式。最简单的方法是将值绑定(bind)到函数调用。即

<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(){...}) 中，因此绑定(bind)“this”将导致错误。您需要将其绑定(bind)到正确的上下文。不过，我认为这超出了这个问题的范围。只是想让您知道是否遇到该问题。