53 lines
1.8 KiB
TypeScript
Executable File
53 lines
1.8 KiB
TypeScript
Executable File
import { Button, Input } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function CarouselUrlInput(
|
|
{ value, onChange }
|
|
: {
|
|
value?: string[];
|
|
onChange?: (value: string[]) => void;
|
|
}) {
|
|
const [url, setUrl] = useState<string>("");
|
|
const [urls, setUrls] = useState<string[]>(value || []);
|
|
const handleChange = (e) => {
|
|
if (e.target.value !== "") setUrl(e.target.value);
|
|
};
|
|
const handleDelete = (index) => {
|
|
setUrls((prevList) => {
|
|
// 创建一个新数组并移除指定索引的元素
|
|
const newList = [...prevList];
|
|
newList.splice(index, 1);
|
|
return newList;
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
if (value) {
|
|
setUrls(value)
|
|
}
|
|
}, [value])
|
|
useEffect(() => {
|
|
onChange?.(urls);
|
|
}, [urls]);
|
|
return (
|
|
<>
|
|
<div className="w-full flex gap-2">
|
|
<Input className="w-[500px]" placeholder="请输入跳转链接" onChange={handleChange} />
|
|
<Button onClick={() => {
|
|
if (url) setUrls((prevUrls) => [...prevUrls, url]);
|
|
}} type="primary">添加轮播图链接</Button>
|
|
</div>
|
|
<div>
|
|
<ul>
|
|
{urls.map((item, index) => (
|
|
<li className="flex justify-between mt-2 ml-1 p-2 bg-white rounded-lg" key={index}>
|
|
<Input className="w-4/5" defaultValue={item} disabled />
|
|
{/* <span className="w-6 block">{item}</span> */}
|
|
<button className="text-red-500" onClick={() => handleDelete(index)}>删除</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
} |