从列表中单击的元素获取 ID 的最佳方法是什么? 我正在尝试呈现项目列表,然后显示所点击项目的项目详细信息 View 。
例如
render() {
let list = data.map((obj) => {
return <div key={obj[id]} id={obj[id]} onClick={this.handleClick}></div>
});
return <div>{list}</div>;
}
如何获取被点击元素的 ID 以便在另一个组件中使用?
最佳答案
您可以直接从click
事件中获取id
。无需将变量绑定(bind)到事件处理程序。
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>
关于javascript - 从渲染列表中获取点击元素的 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44325272/