小编sar*_*tha的帖子

使用反应和样式组件打印时如何隐藏按钮?

我想在单击页面中的打印按钮时隐藏打印按钮。打印开始后基本上隐藏网页上的打印按钮。

下面是我的代码,

const printItems = () => {
    window.print();
}

function ItemsTable() {
    return(
        <>
            <TableCell>
                <span>first</span>
            </TableCell>
            <PrintCell>
                <CircleIconButton
                    name="print"
                    onClick={printItems}
                >
            </PrintCell>
        </>
    ); 
}

const TableCell = styled.div`
    display: flex;
    flex-direction: row;
`;

const PrintCell = styled(TableCell)`
    width: 100px;
    justify-content: flex-end;
`;

const CircleIconButton = styled(IconButton)`
    border-radius: 15px;
    background: none;
    width: 32px;
    height: 32px;
`;
Run Code Online (Sandbox Code Playgroud)

现在我想在用户单击 CircleIconButton 时隐藏 PrintCell。我怎样才能用CSS和媒体打印来做到这一点。

有人可以帮我吗?谢谢。

typescript reactjs

5
推荐指数
1
解决办法
4481
查看次数

如何使用 TypeScript 和 React 将地图弹出窗口放置在某个元素旁边的固定位置?

我是使用 Google Maps API 的新手,我希望将弹出窗口始终放置在地图上元素旁边的固定位置,以便它可以随地图拖动,并使用 TypeScript 和 React 将其放置在地图上。

我想做什么?

当单击页面底部的按钮之一时,我会显示一个弹出窗口。这些按钮称为区域,它们可能具有与之相关的多边形。

当用户单击这些按钮之一时,地图上会显示一个弹出窗口。这个弹出窗口的位置是这样的,

如果区域按钮有一个多边形,那么它会读取该多边形的坐标并将弹出窗口定位在多边形坐标处。如果没有多边形并且设置了地址,则它将弹出位置设置在地址坐标处。如果没有多边形也没有地址,那么它将弹出位置设置为谷歌地图的中心。

但现在我想将弹出窗口始终放置在工具元素旁边的位置,这样弹出窗口距离工具元素左侧 16px,并且弹出窗口可以随地图拖动。

下面是我的代码,

function useArea() {
    const googleMap = useGoogleMaps();
    const popUpRef = React.useRef<any>();
    const [position, setPosition] = React.useState<google.maps.LatLng>();
    const [mapPopups, setMapPopups] = React.useState<MapPopup[]>([]);

    const navigateToPolygon = (area: area, address?: address) => { 
        const polygon = head(area.polygons);
        const coords = polygon && head(polygon.coordinate);
        let latLng = googleMap.googleMap.getCenter();
        if (polygon && coords) {
            latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
        } else if (address) {
            latLng = new google.maps.LatLng(
                address.coordinate.latitude, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

5
推荐指数
0
解决办法
132
查看次数

如何将可选参数传递给react和javascript中的函数?

我想使用 javascript 为函数设置一个可选参数。我有一个如下定义的函数,

const function1 = () => {
    setValue(!open);
};
Run Code Online (Sandbox Code Playgroud)

我在其他函数中像下面这样称呼它

const main_function = () => {
    function1();
}
Run Code Online (Sandbox Code Playgroud)

现在我想将一个可选参数传递给 function1 以接受一个将其设置为 true 或 false 的可选参数,而不是根据先前的值进行切换。

我怎样才能解决这个问题。有人可以帮我解决这个问题吗?

javascript reactjs

2
推荐指数
1
解决办法
3万
查看次数

标签 统计

reactjs ×3

javascript ×2

typescript ×1