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

【问题标题】：How to pass an object as an argument using a React onClick event?如何使用 React onClick 事件将对象作为参数传递？
【发布时间】：2021-05-12 18:35:26
【问题描述】：

我有一个对象数组，并从中呈现了名称。我想要做的是，当我点击它们时，我会得到包含我点击的名称的确切对象，然后将这些其他数据呈现出来。

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>
  );
}

【问题讨论】：

标签： arrays reactjs dictionary object

【解决方案1】：

你需要：

使用参数 userID 添加到函数 handleSelect(userID)：

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

在 div 或 p 中添加 onClick 事件

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

【讨论】：

【解决方案2】：

给被点击的元素一些data-*属性。
按 id 查找项目。
不要在 React 中使用索引作为键。使用唯一 ID。
在React.useCallback 中包装函数。

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>
  );
}

【讨论】：

【解决方案3】：

这样可以：

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>
  );

这是一个代码框链接：for the above

当然，您可以尝试重新访问该对象。看看这个：

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}`);
  };

【讨论】：

【解决方案4】：

诱惑是将 React onClick 视为与 html 标记中的 onclick 属性相同。但是在后者中，您将调用要执行的函数及其参数（例如：

  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>
  );

这是一个有效的 Stackblitz：https://stackblitz.com/edit/react-6ywm5v

【讨论】：