我正在将类代码更改为自定义 Ant Design Tabs 的功能代码。一切正常,但我无法更改 onEdit 功能。我该怎么做。
这是类中的代码
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Tabs, Button } from 'antd';
const { TabPane } = Tabs;
class Demo extends React.Component {
constructor(props) {
super(props);
this.newTabIndex = 0;
const panes = [
{ title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
];
this.state = {
activeKey: panes[0].key,
panes,
};
}
onChange = activeKey => {
this.setState({ activeKey });
};
onEdit = (targetKey, action) => {
this[action](targetKey);
};
add = () => {
const { panes } = this.state;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
this.setState({ panes, activeKey });
};
remove = targetKey => {
let { activeKey } = this.state;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
activeKey = panes[lastIndex].key;
} else {
activeKey = panes[0].key;
}
}
this.setState({ panes, activeKey });
};
render() {
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button onClick={this.add}>ADD</Button>
</div>
<Tabs
hideAdd
onChange={this.onChange}
activeKey={this.state.activeKey}
type="editable-card"
onEdit={this.onEdit}
>
{this.state.panes.map(pane => (
<TabPane tab={pane.title} key={pane.key}>
{pane.content}
</TabPane>
))}
</Tabs>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('container'));
这是我在函数中的代码
const initialPanes = [
{ title: "Tab 1", content: "Content of Tab 1", key: "1" },
{
title: "Tab 2",
content: "Content of Tab 2",
key: "2",
closable: true,
},
];
const Curriculum = (props) => {
const [activeKey, setActiveKey] = useState(initialPanes[0].key);
const [panes, setPanes] = useState(initialPanes);
var newTabIndex = 0;
const onChange = (activeKey) => {
setActiveKey(activeKey);
};
const add = () => {
const activeKey = `newTab${newTabIndex++}`;
const newPanes = [...panes];
newPanes.push({
title: "New Tab",
content: "Content of new Tab",
key: activeKey,
});
setActiveKey(activeKey);
setPanes(newPanes);
};
const remove = (targetKey) => {
let newActiveKey = activeKey;
let lastIndex;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter((pane) => pane.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const onEdit = (targetKey, action) => {
add([action](targetKey));
remove([action](targetKey));
};
return (
<Tabs
type='editable-card'
onChange={onChange}
activeKey={activeKey}
onEdit={onEdit}
>
{panes.map((pane) => (
<TabPane
tab={pane.title}
key={pane.key}
closable={pane.closable}
>
{pane.content}
</TabPane>
))}
</Tabs>
);
};
export default Curriculum;
确切地说,我如何在函数中编写此类代码。我的onEdit,函数内部的添加和删除函数不起作用
onEdit = (targetKey, action) => {
this[action](targetKey);
};
add = () => {
const { panes } = this.state;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
this.setState({ panes, activeKey });
};
remove = targetKey => {
let { activeKey } = this.state;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
activeKey = panes[lastIndex].key;
} else {
activeKey = panes[0].key;
}
}
this.setState({ panes, activeKey });
};
我想要一个类似的功能,但代码必须在一个函数而不是类里面 查看 CodeSand 框在这里