如何将任何事件添加到组件的特定部分？反应

Question

我有一个用地图呈现它的数据列表 - 我需要在该列表的其中一项中添加一个事件。

const UserModal = (props) => {
const {user,setUser} = props ;
const list = [,{id:3,text:'گفت وگو ها',icon:<BsChat />},{id:5,text:'خروج',icon:<BiExit />},];
/this is my list for making navigation bar

return (
    <div className={style.main}>
        <div style={{bordeBottom:'1px solid black'}}>
            <BiUser />
            <p>{user.username}</p>
        </div>
        { //this is where I render a list to show and make component
            list.map((item)=>
            <div key={item.id}>
                {item.icon}
                <p>{item.text}</p>
            </div>)
        }
    </div>
  );
};

 export default UserModal;

这是我的代码，例如，我需要在该列表中具有 id=5 的特定对象上添加一个事件。我该怎么做

Answer 1

我不知道是否有某种 built-in 解决方案，但这里有一个简单的解决方法：

为了简单起见，我更改了一些内容
重要的部分是 if 语句，它检查项目 ID 是否为 5，如果是，则添加 div 和所需的事件

function App() {
  const list = [
    ,
    { id: 3, text: "comonent 3" },
    { id: 5, text: "comonent 5 (target)" }
  ];

  return (
    <>
      <h1>Hello world<h1/>

      {list.map((item) => (
        <div key={item.id} style={{ backgroundColor: "red" }}>
          <p>{item.text}</p>

          {item.id == 5 ? (
            <div
              onClick={() => {
                alert("This component has a event");
              }}
            >
              {" "}
              event
            </div>
          ) : (
            <></>
          )}
        </div>
      ))}
    </>
  );
}

Answer 2

    const UserModal = (props) => {
    const {user,setUser} = props ;
const myEvent = () => alert('event fired');
     const list = [,{id:3,text:'گفت وگو ها',icon:<BsChat /> , event : myEvent},{id:5,text:'خروج',icon:<BiExit />},];
    /this is my list for making navigation bar
    
    return (
        <div className={style.main}>
            <div style={{bordeBottom:'1px solid black'}}>
                <BiUser />
                <p>{user.username}</p>
            </div>
            { //this is where I render a list to show and make component
                list.map((item)=>
                <div key={item.id}>
                    {item.icon}
              
                    <p onClick={item.event}>{item.text}</p>
                </div>)
            }
        </div>
      );
    };
    
     export default UserModal;

Answer 3

list.map((item, i)=> (
    item.id == 5 ?
      <div onClick={handleClick} key={i}></div> 
      :
      <div key={i}></div>
)

如何将任何事件添加到组件的特定部分？反应

how can I add any event to a specific part of component ? react

reactjs

react-hooks