Onclick 函数在地图函数内部的元素中不起作用[重复]

Question

import React from 'react'
import user from './api/Userdata'
const Chats = () => {
  const seeMsg = (id) => {
    console.log(id)
  }
  return (
    <div className="main">
        { user.map((currUser) =>{
        const [name, id, time, image] = user;
        return(
        <div className="user w-full h-14 my-1 flex justify-between content-center" key={currUser.id}>
            <img className='shadow rounded-full max-w-full h-11 w-11 align-middle border-none' src={currUser.image} onClick={seeMsg(currUser.id)} alt=""/>
            <div className="name pr-16 pl-1 justify-center text-center flex items-center text-gray-900 font-medium mb-1">{currUser.name}</div>
            <div className="time font-thin text-xs text-center flex items-center pr-2">{ currUser.time }</div>
        </div>
          )})}
      </div>
  )
}

export default Chats

我正在尝试创建一个 Whatsapp 克隆。这些是成功打印的基本细节。但我希望当有人单击特定配置文件时，其 id 将使用 seeMsg() 在控制台中打印。所以我使用 onclick 但它显示错误。

Answer 1

您面临的问题是由于您在代码中使用“onClick”处理程序的方式造成的。 “onClick”处理程序需要对函数的引用，但在当前代码中，您在渲染组件时直接调用该函数。它应该看起来像这样：

onClick={() => seeMsg(currUser.id)}