在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

//你可以做這樣的事情

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

Answer 2

您提出的問題本質上是“如何將參數傳遞給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'將導致錯誤。 您將需要將其綁定到正確的上下文。 但是，我認為這超出了這個問題的范圍。 只是想讓您知道是否遇到該問題。