如何从React中的事件对象访问自定义属性?

2020/10/13 17:01 · javascript ·  · 0评论

http://facebook.github.io/react/docs/jsx-gotchas.html所述,React能够呈现自定义属性

如果要使用自定义属性,则应在其前面加上data-。

<div data-custom-attribute="foo" />

那是个好消息,除了我找不到从事件对象访问它的方法,例如:

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
    this.setState({inputVal: event.target????}); 
},

元素和data-属性以html呈现。像标准属性一样style可以访问event.target.style而不是event.target我尝试:

 event.target.props.data.tag
 event.target.props.data["tag"]
 event.target.props["data-tag"]  
 event.target.data.tag
 event.target.data["tag"]
 event.target["data-tag"]

这些都不起作用。

为了帮助您以与要求不同的方式获得期望的结果:

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

请注意bind()因为这都是JavaScript,所以您可以做这样的方便的事情。我们不再需要将数据附加到DOM节点来跟踪它们。

IMO这比依赖DOM事件干净得多。

2017年4月更新:这些天我会写onClick={() => this.removeTag(i)}而不是.bind

event.target为您提供了本机DOM节点,那么您需要使用常规DOM API来访问属性。以下是有关如何执行此操作的文档:使用数据属性

您可以执行以下任一操作event.target.dataset.tag或者 event.target.getAttribute('data-tag')任一个作品。

这是我发现的最好方法:

var attribute = event.target.attributes.getNamedItem('data-tag').value;

这些属性存储在“ NamedNodeMap”中,您可以使用getNamedItem方法轻松访问。

或者您可以使用闭包:

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag(i)}></a>
...
},
removeTag: function (i) {
    return function (e) {
    // and you get both `i` and the event `e`
    }.bind(this) //important to bind function 
}
// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>
<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

所以e.currentTarget.attributes['tag'].value对我有用

从React v16.1.1(2017)开始,以下是官方解决方案:https ://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP应该做到:

render: function() {
...
<a style={showStyle} onClick={(e) => this.removeTag(i, e)}></a>
...
removeTag: function(i, event) {
    this.setState({inputVal: i}); 
}

您可以像这样访问数据属性

event.target.dataset.tag

这段代码为我解决了这个问题:

event.currentTarget.getAttribute('data-tag')

我不了解React,但是在一般情况下,您可以像这样传递自定义属性:

1)在html标签内定义一个带有data-前缀的新属性

data-mydatafield = "asdasdasdaad"

2)从javascript获取

e.target.attributes.getNamedItem("data-mydatafield").value 

如果有人试图在React中使用event.target并找到一个空值,那是因为SyntheticEvent取代了event.target。SyntheticEvent现在包含“ currentTarget”,例如在event.currentTarget.getAttribute('data-username')中。

https://facebook.github.io/react/docs/events.html

看起来React可以做到这一点,因此它可以在更多浏览器中使用。您可以通过nativeEvent属性访问旧属性。

尝试不分配dom属性(这很慢),而只是将您的值作为参数传递给实际创建处理程序的函数:

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
    this.setState({inputVal: customAttribute});
}

您可以简单地使用event.target.dataset对象。这将为您提供具有所有数据属性的对象。

在React中,您不需要html数据,使用一个函数返回另一个函数;这样,发送自定义参数非常简单,您可以访问自定义数据和事件。

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},

我认为建议所有方法绑定需要使用React.Component类中定义的this.setState方法的内部构造函数中,在这种情况下,构造函数应类似于

    constructor() {
        super()
        //This binding removeTag is necessary to make `this` work in the callback
        this.removeTag = this.removeTag.bind(this)
    }
    removeTag(event){
        console.log(event.target)
        //use Object destructuring to fetch all element values''
        const {style, dataset} = event.target
        console.log(style)
        console.log(dataset.tag)
    }
   render() {
   ...
      <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
   ...},

有关对象销毁的更多参考,参见
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

本文地址:http://javascript.askforanswer.com/ruhecongreactzhongdeshijianduixiangfangwenzidingyishuxing.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!