无法获取在反应挂钩中单击的项目的键值

Question

在单击每个框时，我想获得相应框的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>
  );
}

Answer 1

代码需要将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>
  );