import React, { useState, useCallback } from "react"; import Taro from "@tarojs/taro"; import { View } from "@tarojs/components"; import { LgPopLayer, LgButton } from "lancoo-ui-mobile"; import "../index.scss"; export const Jsx = () => { const [isOpen, setIsOpen] = useState(false); const handleLayer = useCallback(() => { setIsOpen(!isOpen); }, [isOpen]); const confirm = useCallback(() => { Taro.showToast({ title: "点击确定", icon: "none" }); handleLayer(); }, [handleLayer]); return ( <View className="iframe__viewport"> <View className="viewport__title">向下弹出</View> <View className="viewport__main"> <LgButton onClick={handleLayer}>显示上方弹出层</LgButton> <LgPopLayer position="top" isOpen={isOpen} confirm={confirm} showLayer={handleLayer} > <View className="lg-poplayer__content">自定义内容</View> </LgPopLayer> </View> </View> ); }; 改成类组件写法
时间: 2024-04-10 14:32:53 浏览: 15
import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { LgPopLayer, LgButton } from "lancoo-ui-mobile";
import "../index.scss";
class Jsx extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
}
handleLayer = () => {
this.setState((prevState) => ({
isOpen: !prevState.isOpen
}));
};
confirm = () => {
Taro.showToast({ title: "点击确定", icon: "none" });
this.handleLayer();
};
render() {
const { isOpen } = this.state;
return (
<View className="iframe__viewport">
<View className="viewport__title">向下弹出</View>
<View className="viewport__main">
<LgButton onClick={this.handleLayer}>显示上方弹出层</LgButton>
<LgPopLayer
position="top"
isOpen={isOpen}
confirm={this.confirm}
showLayer={this.handleLayer}
>
<View className="lg-poplayer__content">自定义内容</View>
</LgPopLayer>
</View>
</View>
);
}
}
export default Jsx;