我无法在 Next.js 中使用 Semantic UI 中的 Dropdown/Modal。下面的代码无法正常运行(点击按钮无反应)
'use client';
import Image from "next/image";
import * as React from "react";
import { Button, Header, Modal, Icon } from "semantic-ui-react";
export default function Home() {
const [open, setOpen] = React.useState(false);
return (
<div className="centered">
<Icon size="massive" name="world" />
<div className="separator" />
<Modal
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
trigger={<Button>Show Modal</Button>}
>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<span style={{ marginRight: 21 }}>
<Image src="/image.png" width={400} height={266} />
</span>
<Modal.Description>
<Header>Default Profile Image</Header>
<p>
We've found the following gravatar image associated with your
e-mail address.
</p>
<p>Is it okay to use this photo?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<Button color="black" onClick={() => setOpen(false)}>
Nope
</Button>
<Button
content="Yep, that's me"
labelPosition="right"
icon="checkmark"
onClick={() => setOpen(false)}
positive
/>
</Modal.Actions>
</Modal>
</div>
);
}
我用谷歌搜索了很多,但找不到任何带有 APP 路由器的语义 UI 的示例。请帮忙。
将
onClick={() => setOpen(true)}
添加到您的触发按钮
trigger={<Button>Show Modal</Button>}
至 trigger={<Button onClick={() => setOpen(true)}>Show Modal</Button>}