Arrays 如何使用React onClick事件将对象作为参数传递？

我有一个对象数组，我从中渲染了名称。我想做的是，当我单击它们时，我会得到包含我单击的名称的确切对象，然后渲染出其他数据

export default function App() {

  const array = [
    {
      id: 1,
      name: 'John',
      num: '0123'
    },
    {
      id: 2,
      name: 'Dave',
      num: '456'
    },
    {
      id: 3,
      name: 'Bruce',
      num: '789'
    },
  ]

  const handleClick = (e) => {
    console.log(e.target)
  }
  return (
    <div className="App">
      {array.map((item, index) => {
        return (
          <div key={index}>
            <p onClick={handleClick}>{item.name}</p>
          </div>
        )
      })}
    </div>
  );
}

导出默认函数App（）{
常量数组=[
{
id:1，
姓名：'约翰'，
数字：“0123”
},
{
id:2，
名字：“戴夫”，
数字：“456”
},
{
id:3，
姓名：'布鲁斯'，
数字：“789”
},
]
常量handleClick=（e）=>{
console.log（例如target）
}
返回(
{array.map（（项，索引）=>{
返回(
{item.name}
)
})}
);
}

这样做可以：

const handleClick = (id, name, num) => {
    console.log(`id=${id}, name=${name}, num=${num} `);
  };
  return (
    <div className="App">
      {array.map((item, index) => {
        return (
          <div key={index}>
            <p onClick={()=>handleClick(item.id, item.name, item.num)}>{item.name}</p>
          </div>
        );
      })}
    </div>
  );

为单击的元素赋予一些

data-*

属性

按id查找项目

不要将索引用作React中的键。使用唯一id

将函数包装在

React.useCallback

中

导出默认函数App（）{
常量数组=[
{
id:1，
姓名：'约翰'，
数字：“0123”
},
{
id:2，
名字：“戴夫”，
数字：“456”
},
{
id:3，
姓名：'布鲁斯'，
数字：“789”
},
]
const handleClick=React.useCallback（（e）=>{
const clickedId=e.target.getAttribute（'data-id'）；
const item=array.find（（{id}）=>id==clickedId）；
控制台日志（项目）；
}, []);
返回(
{array.map（（项）=>{
返回(
{item.name}

)
})}
);
}

您需要：

使用参数userID添加到函数handleSelect（userID）：

将onClick事件添加到div或p

{array.map（（项，索引）=>{
返回(
handleSelect（item.id）}>{item.name}
)
})}

诱惑在于将React onClick视为与html标记中的onClick属性相同。但在后一种情况下，您将调用要执行的函数及其参数（比如：

{ log（item.id、item.name、item.num） } 返回( {array.map（（项，索引）=>{ 返回(

{handleClick（item）}>{item.name}

) })} ); 下面是一个有效的闪电战：

const handleClick = (id, name, num) => {
    console.log(`Easy way : id=${id}, name=${name}, num=${num} `);

    //Re-access the object. But why? 
    const desiredObjArr = array.filter(obj=> obj.id=id);
    console.log(`I get this in a tough way: ${desiredObjArr[0].name}, ${desiredObjArr[0].id}, ${desiredObjArr[0].num}`);
  };

export default function App() {
  const array = [
    {
      id: 1,
      name: 'John',
      num: '0123'
    },
    {
      id: 2,
      name: 'Dave',
      num: '456'
    },
    {
      id: 3,
      name: 'Bruce',
      num: '789'
    },
  ]

  const handleClick = React.useCallback((e) => {
    const clickedId = e.target.getAttribute('data-id');
    const item = array.find(({ id }) => id === clickedId);
    console.log(item);
  }, []);

  return (
    <div className="App">
      {array.map((item) => {
        return (
          <div key={item.id}>
            <p data-id={item.id} onClick={handleClick}>{item.name}</p>
          </div>
        )
      })}
    </div>
  );
}

  const handleSelect = (userId) => {
    const currentUser = array.filter(item => item.id === userId)[0]
    console.log(currentUser) // or return
  }

    <div className="App">
      {array.map((item, index) => {
        return (
          <div key={index}>
            <p onClick={() => handleSelect(item.id)}>{item.name}</p>
          </div>
        )
      })}
    </div>

  const handleClick = (item) => {
    console.log(item.id, item.name, item.num)
  }
  return (
    <div className="App">
      {array.map((item, index) => {
        return (
          <div key={index}>
            <p onClick={()=>{handleClick(item)}}>{item.name}</p>
          </div>
        )
      })}
    </div>
  );