编辑:我能够通过将对话框分成自己的组件来解决我的问题
我尝试将类型更改为文本而不是字符串,并删除样式中的网格,但同样的问题。如果没有 onchange,我就不会遇到这个问题,但我想从其他函数访问它。该组件来自shadcnui;我尝试将其切换到正常状态,但仍然是同样的问题。
将相关代码加粗。
"use client";
import React from "react";
import { useState, useRef } from "react";
import {
APIProvider,
Map,
AdvancedMarker,
Pin,
InfoWindow,
MapMouseEvent,
} from "@vis.gl/react-google-maps";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
interface MarkerCoords {
lat: number;
lng: number;
}
const api_key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
const mapId = process.env.NEXT_PUBLIC_MAP_ID;
export function MapComp() {
const [markers, setMarkers] = useState<MarkerCoords[]>([]);
**const [message, setMessage] = useState<string>("");**
const [link, setLink] = useState<string>("");
const [dialogOpen, setDialogOpen] = useState(false); // State for controlling dialog visibility
const [selectedMarker, setSelectedMarker] = useState<MarkerCoords | null>(
null
);
const onMapClick = (event: MapMouseEvent) => {
if (!dialogOpen) {
if (event.detail.latLng) {
const { lat, lng } = event.detail.latLng;
if (lat !== undefined && lng !== undefined) {
const newMarker = {
lat: lat,
lng: lng,
};
setSelectedMarker(newMarker);
setMarkers((current) => [...current, newMarker]);
setDialogOpen(true);
}
}
}
};
**const handlePost = () => {
console.log("Message:", message);
console.log("Link:", link);
};**
return (
<APIProvider apiKey={api_key}>
<div style={{ height: "100vh", width: "100vw" }}>
<Map
defaultZoom={8}
defaultCenter={{ lat: 53.54, lng: 10 }}
minZoom={3}
mapId={mapId}
mapTypeControl={false}
streetViewControl={false}
clickableIcons={false}
fullscreenControl={false}
onClick={onMapClick}
restriction={{
latLngBounds: {
north: 85,
south: -85,
west: -179.9999,
east: 179.9999,
},
strictBounds: true,
}}
>
{markers.map((marker, index) => (
<AdvancedMarker
key={index}
position={{ lat: marker.lat, lng: marker.lng }}
onClick={() => handleToggleInfoWindow(index)}
>
<Pin
background={"black"}
borderColor={"black"}
glyphColor={"black"}
/>
...
>
Post
</Button>
)}
</div>
</InfoWindow>
)}
</AdvancedMarker>
))}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Map</DialogTitle>
<DialogDescription>
{selectedMarker?.lat.toFixed(3) +
" °N " +
selectedMarker?.lng.toFixed(3) +
" °W"}
</DialogDescription>
<DialogClose asChild>Button</DialogClose>
</DialogHeader>
**<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label>Message</Label>
<Input
id="message"
placeholder="Post."
type="string"
className="col-span-3"
defaultValue={message}
onChange={(e) => setMessage(e.target.value)}
/>
</div>**
...
</div>
**<Button onClick={() => handlePost()}>Post</Button>**
</DialogContent>
</Dialog>
</Map>
</div>
</APIProvider>
);
}
在输入组件中
defaultValue={message}
更改为 value={message}
。