如何在用戶點擊子元素時檢索屬性值？

有人可以告訴我如何檢索data-custom屬性值，如果我點擊紅色方塊？我不想放置在兒童相同的屬性，因爲它得到詳細如果我有更深的嵌套元素&。如何在用戶點擊子元素時檢索屬性值？

class Example extends React.Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    
 
    this.onClick = this.onClick.bind(this) 
 
    } 
 
    
 
    render(){ 
 
    
 
    return (
 
    
 
     <div className="large-box" data-custom="iExist" onClick={this.onClick}> 
 
     
 
     <div className="box red"></div> 
 
     
 
     </div> 
 
    
 
    ) 
 
    
 
    } 
 
    
 
    onClick(e){ 
 
    
 
    console.log(e.target.getAttribute('data-custom')) 
 
    
 
    } 
 

 
} 
 

 
ReactDOM.render(<Example />,document.getElementById('app'))

.large-box { 
 
    display:flex; 
 
    width:200px; 
 
    height:100px; 
 
    border:1px solid black; 
 

 
} 
 

 
.box { 
 
    margin:auto auto; 
 
    width:40px; 
 
    height:40px; 
 

 
} 
 

 
.red{background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2017-09-13 Jan Ciołek

爲什麼不直接將值傳遞給'onClick'函數？ 'onClick = {this.onClick.bind（this，'custom-value'）}' – bennygenel

我已經讀過它的糟糕做法，因爲它每次創建新函數都會反應渲染函數，這會導致性能問題。我想知道我應該關心性能多少，因爲綁定或使用'（）=> {}'函數聽起來就像是簡單的方法。 –

簡單 - 使用event.currentTarget

來源：https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.

class Example extends React.Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    
 
    this.onClick = this.onClick.bind(this) 
 
    } 
 
    
 
    render(){ 
 
    
 
    return (
 
    
 
     <div className="large-box" data-custom="iExist" onClick={this.onClick}> 
 
     
 
     <div className="box red"></div> 
 
     
 
     </div> 
 
    
 
    ) 
 
    
 
    } 
 
    
 
    onClick(e){ 
 
    console.log(e.currentTarget.getAttribute('data-custom')) 
 
    
 
    } 
 

 
} 
 

 
ReactDOM.render(<Example />,document.getElementById('app'))

.large-box { 
 
    display:flex; 
 
    width:200px; 
 
    height:100px; 
 
    border:1px solid black; 
 

 
} 
 

 
.box { 
 
    margin:auto auto; 
 
    width:40px; 
 
    height:40px; 
 

 
} 
 

 
.red{background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2017-09-13 19:22:48 totbar

那就是我在找的東西！ –

@JanCiołek這裏唯一需要注意的是Safar 9和更低版本不支持這個。 – totbar

只是檢查使用hasAttibute方法屬性data-custom。如果屬性不存在，則從parentNode得到它。

class Example extends React.Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    
 
    this.onClick = this.onClick.bind(this) 
 
    } 
 
    
 
    render(){ 
 
    
 
    return (
 
    
 
     <div className="large-box" data-custom="iExist" onClick={this.onClick}> 
 
     
 
     <div className="box red"></div> 
 
     
 
     </div> 
 
    
 
    ) 
 
    
 
    } 
 
    
 
    onClick(e){ 
 
    
 
    console.log(e.target.hasAttribute('data-custom')?e.target.getAttribute('data-custom'):e.target.parentNode.getAttribute('data-custom')) 
 
    
 
    } 
 

 
} 
 

 
ReactDOM.render(<Example />,document.getElementById('app'))

.large-box { 
 
    display:flex; 
 
    width:200px; 
 
    height:100px; 
 
    border:1px solid black; 
 

 
} 
 

 
.box { 
 
    margin:auto auto; 
 
    width:40px; 
 
    height:40px; 
 

 
} 
 

 
.red{background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2017-09-13 19:00:11 Ved

是的，這將做的伎倆，即使嵌套級別不靜態我可以做一些循環潛伏的屬性。謝謝！ –

不要循環。爲此創建遞歸函數。 – Ved

這就更好了！ –

如何在用戶點擊子元素時檢索屬性值？

回答

相關問題