第一段引用上面的摘要：
本文旨在解决 React 应用中，当通过 Lodash 等工具映射对象生成多个相似 HTML 元素时，如何精确地为每个元素绑定事件，并控制其内部特定内容显示与隐藏的问题。通过使用 useState hook 管理每个元素的类名状态，结合 onClick 事件，实现对特定元素的精确控制，从而避免了使用 document.getElement 带来的问题。
在 React 中，动态渲染组件时，为每个组件绑定独立的事件并操作其内部元素是一个常见的需求。特别是在数据来自后端，需要根据数据动态生成 HTML 结构时，直接使用 document.getElement 等方法容易出现问题，因为映射生成的组件可能具有相同的类名。本文将介绍一种使用 useState hook 管理类名状态，并结合 onClick 事件处理函数，实现精确控制的方法。
核心思路：
立即学习“前端免费学习笔记（深入）”；
使用 useState hook 为每个映射生成的组件维护一个状态，用于存储控制显示隐藏的类名。在 onClick 事件处理函数中，通过 setState 更新该组件的状态，从而切换类名，达到显示隐藏的效果。
示例代码：
import _ from "lodash";import React, { useState } from 'react';const dummyData = { columnOne: "item one", columnTwo: "item two", columnThree: "item three"};function TestPage() { const [activeColumns, setActiveColumns] = useState({}); const toggleContent = (key) => { setActiveColumns(prevState => ({ ...prevState, [key]: !prevState[key] })); }; return ( _.map(dummyData, (data, key) => { const isContentVisible = activeColumns[key] || false; // 默认隐藏 return ( {key}
toggleContent(key)} style={{ cursor: 'pointer' }} > V {data}
); }) );}export default TestPage;
代码解释：
useState hook： const [activeColumns, setActiveColumns] = useState({}); 初始化一个状态 activeColumns，它是一个对象，用于存储每个列的激活状态（是否显示）。 初始值为空对象，表示所有列默认都是隐藏的。toggleContent 函数： const toggleContent = (key) => { … }; 这个函数接收一个 key 参数（对应于 dummyData 中的键名），用于切换对应列的显示状态。它使用 setActiveColumns 更新 activeColumns 状态。 prevState => ({ …prevState, [key]: !prevState[key] }) 这部分代码使用了函数式更新，确保基于前一个状态进行更新。它首先复制前一个状态（…prevState），然后更新或添加 key 对应的布尔值，取反前一个状态的值，实现切换。onClick 事件：
根据 isContentVisible 的值（从 activeColumns 状态中获取）动态设置 content 的 display 样式，从而控制其显示或隐藏。
注意事项：
确保每个映射生成的组件都有一个唯一的 key prop，这对于 React 的性能优化至关重要。如果需要更复杂的动画效果，可以考虑使用 CSS 过渡或动画库（如 react-transition-group）。如果数据量很大，可以考虑使用 useMemo hook 优化性能，避免不必要的重新渲染。
总结：
通过使用 useState hook 管理每个组件的类名状态，结合 onClick 事件处理函数，可以有效地控制动态渲染的组件的行为。这种方法避免了直接操作 DOM 元素，符合 React 的声明式编程思想，并且具有良好的可维护性和可扩展性。 这种方法适用于需要对每个动态生成的元素进行独立控制的场景。 示例代码展示了如何使用状态来控制元素的显示和隐藏，可以根据实际需求进行修改和扩展，例如修改样式、添加动画效果等。
以上就是React 中通过对象映射的目标 HTML 元素的事件处理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571966.html
微信扫一扫 
支付宝扫一扫 
