如何从事件对象访问自定义属性在反应?

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

如果要使用自定义属性，则应该在其前面加上数据- - - - - -。 <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????}); 
},

元素和数据属性在html中呈现良好。像style这样的标准属性可以通过event.target.style fine访问。而不是事件。我试了试:

 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"]

这些都没用。

当前回答

// 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>

2017-08-29 12:14:26

其他回答

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

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

2017-06-14 09:11:35

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

应该:

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

2017-11-26 19:47:02

// 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>

2017-08-29 12:14:26

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

2020-03-18 05:23:46

如果你有多个不同数据标签(年龄，姓名，电子邮件)的图标:

       <button
          data-label="name" 
          onMouseOver={handleValue}
          className="icon"
        >
          <FaUser />
        </button>

当鼠标停留在图标上时，可以通过访问data-label来更改标题

const handleValue = (e) => {
    // making sure mouse is over an icon
    if (e.target.classList.contains("icon")) {
      const newValue = e.target.dataset.label;
      setTitle(newValue);
      setValue(person[newValue]);
    }
  };

2022-09-24 03:57:18

如何从事件对象访问自定义属性在反应?

推荐文章

最新文章

标签