reactjs - 无法获取在反应挂钩中单击的项目的键值
问题描述
在单击每个框时,我想获得tags
相应框的。但是,当控制台记录打印标签时,它显示为未定义。我已经尝试过e.currentTarget.tags
和 两种情况e.target.tags
,但仍然没有得到正确的结果。有人可以帮忙吗?
演示链接:
https://codesandbox.io/s/serene-elgamal-lyyih?file=/src/App.js:87-1914
const blogData = [
{
id: 1,
title: "Cypress tests",
description: "Add the E2E cypress UI tests",
createddate: "19 September 2020",
tags: "cypress"
},
{
id: 2,
title: "Jmeter tests",
description: "Performance test using Jmeter tool",
createddate: "15 August 2020",
tags: ["jmeter", "performance"]
},
{
id: 3,
title: "Basic Unix commands",
description: "Learn basic unix commands in git bash",
createddate: "10 July 2020",
tags: "unix"
},
{
id: 4,
title: "Postman",
description: "Api testing using postman",
createddate: "1 June 2020",
tags: ["postman", "api"]
}
];
export default function App() {
const [searchResults, setSearchResults] = useState([]);
const [showColor, setShowColor] = useState("");
const [findTag, setFindTag] = useState("");
useEffect(() => {
setSearchResults(blogData);
}, [blogData]);
const randomizedHex = (e) => {
setFindTag(e.currentTarget.tags);
console.log("Print tag:", findTag);
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
setShowColor(randomColor);
};
return (
<div className="App">
<div className="wrap">
{searchResults.map((blog) => (
<article onClick={randomizedHex} className="equalBox">
<section>
<span key={blog.id}> {blog.id} </span>
</section>
<section>
<div key={blog.tags}>{blog.tags}</div>
</section>
</article>
))}
</div>
</div>
);
}
解决方案
代码需要将blog
对象传递给回调:
const randomizedHex = (blog) => {
setFindTag(blog.tags);
console.log("Print tag:", findTag);
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
setShowColor(randomColor);
};
return (
<div className="App">
<div className="wrap">
{searchResults.map((blog) => (
<article onClick={() => { randomizedHex(blog); }} className="equalBox">
<section>
<span key={blog.id}> {blog.id} </span>
</section>
<section>
<div key={blog.tags}>{blog.tags}</div>
</section>
</article>
))}
</div>
</div>
);
推荐阅读
- c++ - Stackful coroutines + gdb = "此帧内部的前一帧(损坏的堆栈)?"
- rest - Jersey REST (GET) throwing MessageBodyWriter not found for media type=application/xml
- python - 用 Python 实现 SHA1-HMAC
- java - 尝试删除实体时的 PERSISTENCE_DATAACCESS_EXCEPTION
- python - 如何使用既是数组又是普通 int 的列来解压熊猫?
- android - 更新后Android资源编译失败
- ios - 为什么 mailto href 在 Safari iOS [11.3] 上不起作用?
- java - Java Android Picasso 调整图像大小
- javascript - 使用 NGINX 的节点服务器
- android - XIaomi 设备从后台打开 Activity 时不关闭锁屏(警报事件)