Làm cách nào để truy cập các thuộc tính tùy chỉnh từ đối tượng sự kiện trong React?

React có thể hiển thị các thuộc tính tùy chỉnh như được mô tả tại http://facebook.github.io/react/docs/jsx-gotchas.html :

Nếu bạn muốn sử dụng một thuộc tính tùy chỉnh, bạn nên thêm tiền tố vào dữ liệu-.

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

Và đó là tin tuyệt vời ngoại trừ tôi không thể tìm cách truy cập nó từ đối tượng sự kiện, ví dụ:

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

Các phần tử và thuộc data-tính kết xuất trong html tốt. Các thuộc tính tiêu chuẩn như stylecó thể được truy cập là event.target.styletốt. Thay vì event.targettôi đã thử:

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

Không ai trong số này làm việc.

Để giúp bạn có được kết quả mong muốn theo một cách khác với cách bạn đã hỏi:

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

Lưu ý bind() . Bởi vì đây là tất cả javascript, bạn có thể làm những việc tiện dụng như thế. Chúng tôi không còn cần phải đính kèm dữ liệu vào các nút DOM để theo dõi chúng.

IMO này sạch hơn nhiều so với việc dựa vào các sự kiện DOM.

Cập nhật tháng 4 năm 2017: Những ngày này tôi sẽ viết onClick={() => this.removeTag(i)}thay vì.bind

event.targetcung cấp cho bạn nút DOM gốc, sau đó bạn cần sử dụng API DOM thông thường để truy cập các thuộc tính. Dưới đây là tài liệu về cách thực hiện điều đó: Sử dụng các thuộc tính dữ liệu .

Bạn có thể làm một trong hai event.target.dataset.taghoặc event.target.getAttribute('data-tag'); một trong hai hoạt động.

Đây là cách tốt nhất tôi tìm thấy:

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

Các thuộc tính này được lưu trữ trong "NamedNodeMap", mà bạn có thể truy cập dễ dàng bằng phương thức getNamedItem.

Hoặc bạn có thể sử dụng một bao đóng:

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>

Kể từ React v16.1.1 (2017), đây là giải pháp chính thức: https://reactjs.org/docs/handling-events.html#passing-argument-to-event-handlers

TLDR: OP nên làm:

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

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

vì vậy e.currentTarget.attributes['tag'].valuelàm việc cho tôi

Bạn có thể truy cập các thuộc tính dữ liệu như thế này

event.target.dataset.tag

Dòng mã này đã giải quyết vấn đề cho tôi:

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

Tôi không biết về React, nhưng trong trường hợp chung, bạn có thể chuyển các thuộc tính tùy chỉnh như thế này:

1) xác định bên trong thẻ html một thuộc tính mới có tiền tố dữ liệu

data-mydatafield = "asdasdasdaad"

2) nhận từ javascript với

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

Nếu bất cứ ai đang cố gắng sử dụng event.target trong React và tìm giá trị null, thì đó là bởi vì TotalEvent đã thay thế event.target. Hiện tại, TotalEvent giữ 'currentTarget', chẳng hạn như trong event.cienTarget.getAttribution ('data-username').

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

Có vẻ như React thực hiện điều này để nó hoạt động trên nhiều trình duyệt hơn. Bạn có thể truy cập các thuộc tính cũ thông qua thuộc tính localEvent.

Hãy thử thay vì gán các thuộc tính dom (chậm), chỉ cần chuyển giá trị của bạn dưới dạng tham số cho hàm thực sự tạo trình xử lý của bạn:

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

Bạn chỉ có thể sử dụng đối tượng event.target.dataset . Điều này sẽ cung cấp cho bạn đối tượng với tất cả các thuộc tính dữ liệu.

Trong React bạn không cần dữ liệu html, sử dụng hàm trả về hàm khác; như thế này rất đơn giản gửi thông số tùy chỉnh và bạn có thể tích lũy dữ liệu tùy chỉnh và sự kiện.

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