Javascript 根据元素获取数据

我有一个应用程序，我想实现下一个逻辑。当我单击

div

时，我想从该

div

获取数据

从“React”导入React；
常数测试=（）=>{
常数数据=[{
姓名：'约翰'，
最后：“Doe”，
年龄:22,，
身份证号码：1
},
{
姓名：'比尔'，
最后：“Doe”，
年龄:5岁，
身份证号码：2
}
];
常量getRowData=（dataRow）=>{
console.log（数据行）
};
报税表（
{
data.map（i=>{
返回{
i、 名字
} 
})
} 
);
};
导出默认测试；

例如，如果我单击first

div

，我想获取有关此人的所有数据：

name: 'John',
last: 'Doe',
age: 22,
id: 1

但是现在，onClick函数不能正常工作，因为在第一次渲染时，我在控制台中获取所有数据，但我只需要获取关于一个人的数据，并且只需要在单击特定元素之后。如何解决这个问题

演示：

您可以执行以下操作：

看第二个箭头函数，是为了防止每次渲染都被调用：

const getRowData=（dataRow）=>（）=>{
console.log（数据行）
};

然后获取您的物品：

const getRowData=（dataRow）=>（）=>{
const item=data.find（d=>d.id==dataRow.id）；
};

您可以执行以下操作：

看第二个箭头函数，是为了防止每次渲染都被调用：

const getRowData=（dataRow）=>（）=>{
console.log（数据行）
};

然后获取您的物品：

const getRowData=（dataRow）=>（）=>{
const item=data.find（d=>d.id==dataRow.id）；
};

当您使用参数将其指定为

onClick={getRowData（i）}

时，您将立即调用它。如果将其指定为匿名函数，它将工作，

onClick={（）=>getRowData（i）}

外部函数立即被调用，并返回实际的回调函数，该函数将与包含在函数范围内的传递的

索引一起使用

然后，您可以简单地分配is，如下所示：

{data.map(i => {
  return (
    <div
      onClick={getRowData(i)}
      style={{backgroundColor:'red', height:'50px', width:'200px', border:'1px solid white'}}
    >
      {i.name}
    </div>
  )
})}

{data.map（i=>{
返回(
{i.name}
)
})}
当您使用参数将其指定为
onClick={getRowData（i）}
时，您将立即调用它。如果将其指定为匿名函数，它将工作，
onClick={（）=>getRowData（i）}

外部函数立即被调用，并返回实际的回调函数，该函数将与包含在函数范围内的传递的
索引一起使用

然后，您可以简单地分配is，如下所示：

{data.map(i => {
  return (
    <div
      onClick={getRowData(i)}
      style={{backgroundColor:'red', height:'50px', width:'200px', border:'1px solid white'}}
    >
      {i.name}
    </div>
  )
})}

{data.map（i=>{
返回(
{i.name}
)
})}
您可以这样尝试。单击每个项目。您将得到相应的对象

import React from "react";

const Test = () => {
  const data = [
    {
      name: "John",
      last: "Doe",
      age: 22,
      id: 1
    },
    {
      name: "Bill",
      last: "Doe",
      age: 5,
      id: 2
    }
  ];

  const getRowData = dataRow => {
    console.log(dataRow);
  };

  return (
    <div>
      <div>
        {data.map((data, i) => {
          return (
            <div
              onClick={() => getRowData(data)}
              key={data.name}
              style={{
                backgroundColor: "red",
                height: "50px",
                width: "200px",
                border: "1px solid white"
              }}
            >
              {data.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Test;

从“React”导入React；
常数测试=（）=>{
常数数据=[
{
姓名：“约翰”，
最后：“Doe”，
年龄:22,，
身份证号码：1
},
{
姓名：“比尔”，
最后：“Doe”，
年龄:5岁，
身份证号码：2
}
];
const getRowData=dataRow=>{
console.log（dataRow）；
};
返回(
{data.map（（数据，i）=>{
返回(
getRowData（数据）}
key={data.name}
风格={{
背景颜色：“红色”，
高度：“50px”，
宽度：“200px”，
边框：“1px纯白”
}}
>
{data.name}
);
})}
);
};
导出默认测试；
您可以这样尝试。单击每个项目。您将得到相应的对象

import React from "react";

const Test = () => {
  const data = [
    {
      name: "John",
      last: "Doe",
      age: 22,
      id: 1
    },
    {
      name: "Bill",
      last: "Doe",
      age: 5,
      id: 2
    }
  ];

  const getRowData = dataRow => {
    console.log(dataRow);
  };

  return (
    <div>
      <div>
        {data.map((data, i) => {
          return (
            <div
              onClick={() => getRowData(data)}
              key={data.name}
              style={{
                backgroundColor: "red",
                height: "50px",
                width: "200px",
                border: "1px solid white"
              }}
            >
              {data.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Test;

从“React”导入React；
常数测试=（）=>{
常数数据=[
{
姓名：“约翰”，
最后：“Doe”，
年龄:22,，
身份证号码：1
},
{
姓名：“比尔”，
最后：“Doe”，
年龄:5岁，
身份证号码：2
}
];
const getRowData=dataRow=>{
console.log（dataRow）；
};
返回(
{data.map（（数据，i）=>{
返回(
getRowData（数据）}
key={data.name}
风格={{
背景颜色：“红色”，
高度：“50px”，
宽度：“200px”，
边框：“1px纯白”
}}
>
{data.name}
);
})}
);
};
导出默认测试；