獲取渲染列表中單擊元素的ID

Question

從列表中單擊元素獲取編號的最佳方式是什麼？ 我想呈現項目列表，然後顯示單擊項目的項目詳細視圖。

e.g

render() { 
    let list = data.map((obj) => { 
       return <div key={obj[id]} id={obj[id]} onClick={this.handleClick}></div>   
      }); 
    return <div>{list}</div>; 
} 

如何獲取單擊元素的id在另一個組件用？

Answer 1

你可以直接得到從click事件id。不需要將變量綁定到事件處理程序。

render() { 
    let list = data.map((obj) => { 
     return <div key={obj[id]} id={obj[id]} onClick={this.handleClick}></div>   
    } 
    return <div>{list}</div>; 
} 

handleClick(e){ 
    console.log(e.target.id); 
} 

---

稍微修改工作實例：

class MyApp extends React.Component { 
 
    handleClick(e){ 
 
    console.log(e.target.id); 
 
    } 
 
    
 
    render() { 
 
    let data = [0,1,2,3,4]; 
 
    let list = data.map((obj, id) => { 
 
     return <div key={obj[id]} id={"id-" + id} onClick={this.handleClick}>{obj}</div>   
 
    }); 
 
    return <div>{list}</div> 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<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="myApp"></div>

Answer 2

傳遞的ID在onClick方法爲每個元素：

render() { 
    let list = data.map((obj) => { 
     return <div key={obj.id} id={obj.id} onClick={() => this.handleClick(obj.id)}></div>   
    } 
    return <div>{list}</div>; 
} 

handleClick(id){ 
    console.log(id); 
}