之前有个兄弟问图上效果怎么实现出来,点击+号可以无限增加页面,新增的时候就是编辑状态,鼠标移开就是菜单列表,双击又变成可编辑的状态。于是我去简单实现了下,代码如下:
import React, { useState } from 'react';
import { Input } from 'antd';
import {
DeleteOutlined
} from '@ant-design/icons';
function Menu() {
const [menuItems, setMenuItems] = useState([]);
const [activeId, setActiveId] = useState(null);
const handleAddMenuItem = () => {
const newId = Date.now();
const newMenuItem = {
id: newId,
editing: true,
text: '页面' + (menuItems?.length + 1)
};
setActiveId(newId)
setMenuItems(prevItems => [...prevItems, newMenuItem]);
};
const handleDeleteMenuItem = (id) => {
setMenuItems(prevItems => prevItems.filter(item => item.id !== id));
};
const handleToggleEdit = (id) => {
setMenuItems(prevItems =>
prevItems.map(item => {
if (item.id === id) {
return {
...item,
editing: !item.editing
};
}
return item;
})
);
};
const handleChangeText = (id, newText) => {
setMenuItems(prevItems =>
prevItems.map(item => {
if (item.id === id) {
return {
...item,
text: newText
};
}
return item;
})
);
};
const handleMenuItemClick = (id) => {
if (id !== activeId) {
setMenuItems(prevItems =>
prevItems.map(item => ({
...item,
editing: false
}))
);
}
setActiveId(id);
};
return (
<div style={{width:'200px',height:'600px',backgroundColor:'#fff'}}>
<button onClick={handleAddMenuItem}>新增</button>
{menuItems.map(item => (
<MenuItem
key={item.id}
item={item}
onDelete={handleDeleteMenuItem}
onToggleEdit={handleToggleEdit}
onChangeText={handleChangeText}
onClick={handleMenuItemClick}
activeId={activeId}
/>
))}
</div>
);
}
function MenuItem({ item, onDelete, onToggleEdit, onChangeText, onClick, activeId }) {
const handleDoubleClick = () => {
onToggleEdit(item.id);
};
const handleChange = (e) => {
onChangeText(item.id, e.target.value);
};
const handleDelete = () => {
onDelete(item.id);
};
const handleClick = () => {
onClick(item.id);
};
if (item.id === activeId && item.editing) {
return (
<div style={{width:'200px'}}>
<Input type="text" value={item.text} onChange={handleChange} onBlur={handleDoubleClick} autoFocus />
</div>
);
}
return (
<div style={{width:'200px',padding:'5px',backgroundColor:item.id === activeId?'rgb(218, 235, 254)':'#fff',display:'flex',justifyContent:'space-between'}} onClick={handleClick} onDoubleClick={handleDoubleClick}>
<span>{item.text}</span>
<DeleteOutlined onClick={handleDelete} />
</div>
);
}
export default Menu;
效果如下:
好了现在开始上强度,如果是下图效果那么该怎么做呢?
感兴趣的可以自己想一下哟!