[英]React how to get item props from event.currentTarget
Does react have a clean way to get the this.props.values from a list item? 反应是否有一个干净的方法从列表项中获取this.props.values?
I basically want to get the current items props so I can populate a modal dialog with the data. 我基本上想要获取当前项目道具,以便我可以使用数据填充模态对话框。 as per below functions the custom props that I specify like 'id' are accessible, but I really would like to do something like this and have all the props
根据下面的功能我可以访问我指定的自定义道具,如'id',但我真的想做这样的事情并拥有所有的道具
event.currentTarget.this.props.note
Handler 处理器
clicker(event){
console.log('clicking the clicker');
console.log(event.currentTarget.id);
this.setState({isEdit: true});
console.log(this.state.isEdit);
}
View 视图
<div id={this.props.id} onClick={this.clicker} className="aui-item page-card off-track notecards">
<div className="project-details">
<div className="card-container">
<div className="left">
<h6>Title</h6>
<span>{this.props.note.content}</span>
<h6 className="compact">Last status report</h6>
<span>{this.props.note.updatedAt}</span>
</div>
<div className="right">
<span>something</span>
</div>
</div>
</div>
</div>
You can directly access props inside clicker 你可以直接访问clicker里面的道具
clicker(event){
console.log('clicking the clicker');
console.log(this.props.id);
this.setState({isEdit: true});
console.log(this.state.isEdit);
}
In this case it would be better to create separate component. 在这种情况下,最好创建单独的组件。 In my opinion not necessary to create big huge views.
在我看来,没有必要创造巨大的意见。
So, your component should be like this: 所以,你的组件应该是这样的:
function Item({
id,
updatedAt,
content,
onClick,
}) {
// We should pass `id` variable to `onClick` handler.
return (
<div onClick={() => onClick(id)} className="aui-item page-card off-track notecards">
<div className="project-details">
<div className="card-container">
<div className="left">
<h6>Title</h6>
<span>{content}</span>
<h6 className="compact">Last status report</h6>
<span>{updatedAt}</span>
</div>
<div className="right">
<span>something</span>
</div>
</div>
</div>
</div>
);
}
Or, if you don't want to use separate component, you can access this.props
variable from clicker event handler: 或者,如果您不想使用单独的组件,则可以从
this.props
事件处理程序访问this.props
变量:
clicker(event){
// this.props are accesible here.
this.setState({isEdit: true});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.