如何訪問數據屬性

jsfiddle 如何訪問數據屬性

var Hello = React.createClass({ 
    handleClick(event){ 
    console.log('target info', event.currentTarget); 
    console.log('event info', event); 
    var sortOrder = event.currentTarget.sortorder; 

    console.log('sortOrder: ', sortOrder); 
    alert(sortOrder);//Should say "asc" 
    }, 
    render: function() { 
    return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" onClick={this.handleClick}>Click Here Please</div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
);

預期輸出：ASC
實際：未定義

來源

2016-06-20 P.Brian.Mackey

[訪問，而jQuery的「數據 - 」屬性]的可能的複製（http://stackoverflow.com/questions/15912246/access-data-attribute-without-jquery） –

這似乎並沒有有任何東西特別是與React有關，而不是缺乏對數據屬性如何工作的理解。 –

@FelixKling - 'event'是一個[SyntheticEvent]（https://facebook.github.io/react/docs/events.html#syntheticevent）對不對？你不需要了解如何瀏覽'SyntheticEvent'？ –

我更新了你的提琴：

我能做到它只是通過引用「getAttribute」

event.target.getAttribute("data-sortorder");

這與裁判 https://jsfiddle.net/69z2wepo/46265/

var sortOrder = this.refs.tester.getAttribute("data-sortorder"); 
    alert(sortOrder);//Should say "asc" 
    }, 
    render: function() { 
    return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}>Click Here Please</div>; 
    } 
});

做到這一點：

改變你的元素，加入了「裁判」屬性。

格式= {{的backgroundColor：「紅色」，字體： '5em的'}}的數據排序順序= 「ASC」 REF = 「測試器」的onClick = {this.handleClick}
然後得到該屬性像這樣：this.refs.tester.getAttribute（「數據排序順序」）

OR PER原始請求，W/O REFS：

或每「事件特定的「 - 它的工作正確地引用它，如下所示： event.target.getAttribute（「數據排序順序」）;

來源

2016-06-20 19:00:58

'event.target.getAttribute（「data-sortorder」）;'是我想要的。很高興我們能夠做到這一點沒有參考:)。當定時器耗盡時我會做出來的。 –

爲什麼ref比使用'event'對象更好？ –

如何訪問數據屬性

回答

相關問題