网站建设咨询服务,软件开发全流程,wordpress 邮箱 通知,深圳的大公司前言#xff1a;
我们经常封装一些自己的下拉列表组件 或者 弹窗组件。一般 点击按钮显示 列表或 弹窗。再次点击 隐藏或关闭#xff0c;但 ui库里的下拉列表#xff0c;点击除了自己本身也能实现隐藏对应的列表。下面我就给大家一个实现思路。
弹窗组件可以用 React Port…前言
我们经常封装一些自己的下拉列表组件 或者 弹窗组件。一般 点击按钮显示 列表或 弹窗。再次点击 隐藏或关闭但 ui库里的下拉列表点击除了自己本身也能实现隐藏对应的列表。下面我就给大家一个实现思路。
弹窗组件可以用 React Portals 实现:react 官网 createPortal
实现步骤
这是一个 简单的点击按钮显示列表。再次点击隐藏。但我的需求是点击其他地方也隐藏。
import React, { ReactNode, useEffect, useState, useRef } from react;const MyList () {const [visable, setVisabled] useState(false);return (divbutton onClick{() setVisabled(!visable)}点击显示 列表/buttondiv style{{ display: visable ? block : none }}div11111/divdiv22222/div/div/div);
};
export default MyList;可以利用contains 结合 ref(建议用ref,当然也可以用 document方法给元素加个 id) 。 contains 是 DOM 元素的方法用于确定一个元素是否包含另一个元素。不包含则执行 关闭/隐藏事件。 还需要 注意的是需要 给 隐藏、显示的点击事件加个 阻止事件冒泡的方法event.stopPropagation(); 阻止事件冒泡方法必须加上
代码如下
import React, { ReactNode, useEffect, useState, useRef } from react;const MyList () {const [visable, setVisabled] useState(false);// 下拉列表 refconst dropdownRef useRef(null);useEffect(() {//实现点击 本元素外的元素时隐藏下拉列表点击其他地方隐藏下拉列表function handleOutsideClick(event) {if (dropdownRef.current !dropdownRef.current.contains(event.target)) {setVisabled(false);}}document.addEventListener(click, handleOutsideClick);return () {document.removeEventListener(click, handleOutsideClick);};}, []);const hanldClick (event) {event.stopPropagation(); // 阻止事件冒泡setVisabled(!visable);};return (divbutton onClick{hanldClick}点击显示 列表/buttondiv ref{dropdownRef} style{{ display: visable ? block : none }}div11111/divdiv22222/div/div/div);
};
export default MyList;
核心代码就是这块 需要注意的是 绑定的事件需要 在 组件卸载时移除。
useEffect(() {//实现点击 本元素外的元素时隐藏下拉列表点击其他地方隐藏下拉列表function handleOutsideClick(event) {if (dropdownRef.current !dropdownRef.current.contains(event.target)) {setVisabled(false);}}document.addEventListener(click, handleOutsideClick);return () {document.removeEventListener(click, handleOutsideClick);};}, []);类组件就是这样 只是把useEffetc里的内容 转换成Class语法。componentDidMount 绑定事件componentWillUnmount移除事件。
import React, { Component } from react;
class MyList extends Component {constructor(props) {super(props);this.state {visible: false};this.dropdownRef React.createRef(); // 下拉列表 ref}componentDidMount() {// 实现点击本元素外的元素时隐藏下拉列表点击其他地方隐藏下拉列表document.addEventListener(click, this.handleOutsideClick);}componentWillUnmount() {document.removeEventListener(click, this.handleOutsideClick);}handleOutsideClick (event) {if (this.dropdownRef.current !this.dropdownRef.current.contains(event.target)) {this.setState({ visible: false });}};handleClick (event) {event.stopPropagation(); // 阻止事件冒泡this.setState((prevState) ({visible: !prevState.visible}));};render() {const { visible } this.state;return (divbutton onClick{this.handleClick}点击显示列表/buttondivref{this.dropdownRef}style{{ display: visible ? block : none }}div11111/divdiv22222/div/div/div);}
}
export default MyList;
理论上来说 这个思路在 vue里也适用只需要转化vue语法。不过vue 有指令库 v-clickoutside。
总结
题外话现在ai真的很强大我类组件的写法就是让ai转换的竟然完全正确运行无误 如果简单的组件 可以试试 ai 。比如 chatGPT\文心一言\通义千问。
比如文心给的 就可以用编程方面 chatGPT会比文心强目前 我认为 gpt是独一档的强 文心一言 提问分享
