使用 .map() 方法在 React.js JSX 渲染中获取元素 ID答案

【问题标题】：getting element id in React.js JSX rendering using .map() method使用 .map() 方法在 React.js JSX 渲染中获取元素 ID
【发布时间】：2021-11-29 05:59:51
【问题描述】：

我正在使用 react 开发应用程序，

const getButtonId=(num)=>{
   let click_detect=document.getElementById('div_'+num)
   console.log(click_detect)
}

this.state.users.map(i=>{
   return(
    <button id={'div_'+i.id} onClick={(i.id)=>this.getButtonId(i.id)}>
      Click Me
    </button>
  )
})

所以每次我点击按钮时，我都会收到null。这是为什么？如果我希望所有按钮都有不同的 id，我应该在这里做什么？

【问题讨论】：

试试这个：onClick={()=>this.getButtonId(i.id)}，也别忘了在组件的构造函数中绑定getButtonId函数

标签： reactjs dom

【解决方案1】：

试试这个：


const getButtonId = (id) => console.log("Button ID:", id);

this.state.users.map((user, index) => (
   <button key={index} onClick={() => this.getButtonId(user.id)}>
      Click Me
   </button>
))

【讨论】：