[英]Dynamic onClick and render in ReactJS
im new to React and I need some help figuring this out! 我是React的新手,我需要一些帮助来解决这个问题!
I have a Json object: 我有一个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},]
},
]};
I want to get every block in the object and render the data inside each block(including looping through items inside the block) in a div. 我想获取对象中的每个块,并在div中渲染每个块内的数据(包括遍历该块内的项目)。 The div should have a dynamic onClick-event that registers wich block was clicked.
div应该具有一个动态的onClick事件,该事件注册了被单击的块。
This is what I got: 这就是我得到的:
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>
);
}
}); });
And then render BlockListClass like this: 然后像这样渲染BlockListClass:
<BlockListClass />
// you could do something like this //你可以做这样的事情
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>
);
}
});
The question that you asked is essentially, "how do I pass arguments to onClick events on React Elements". 您提出的问题本质上是“如何将参数传递给React Elements上的onClick事件”。 This is a common pattern you will have to follow in React.
这是React中必须遵循的常见模式。 The easiest way to do this, is just to bind the value to the function call.
最简单的方法是将值绑定到函数调用。 ie
即
<h2 onClick={blockClicked.bind(this, i)} key={i}> {object.type} </h2>
Then your handler would look like the following 然后您的处理程序将如下所示
blockClicked: function(i) {
console.log(i);
},
If you still need access to the click event, then you could initially pass in the index value, and return a function to be called when the onClick event is triggered: 如果仍然需要访问click事件,则可以首先传递索引值,并在触发onClick事件时返回要调用的函数:
<h2 onClick={blockClicked(i)} key={i}> {object.type} </h2>
With a resulting handler: 使用结果处理程序:
blockClicked: function(i) {
return function(e) {
console.log(i);
// do what you want with 'e'
}
}
Edit: I should also note that my answer is very general. 编辑:我还应该注意,我的回答很笼统。 Since your element is nested in a
map(function(){...})
, binding 'this' will cause an error. 由于您的元素嵌套在
map(function(){...})
,因此绑定'this'将导致错误。 You will need to bind it to the correct context. 您将需要将其绑定到正确的上下文。 However, I think that is out of the scope of this question.
但是,我认为这超出了这个问题的范围。 Just wanted to let you know if you run into that issue.
只是想让您知道是否遇到该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.