Ant Design Tabs自定义如何将Class代码改成Function代码
How to change Class code into Function code for Ant Design Tabs customization
我正在将 class 代码更改为用于自定义 Ant Design Tabs 的函数代码。
一切正常,但我无法更改 onEdit 功能。我该怎么做。
这里是里面的代码Class
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;
准确地说,我该如何在函数中编写此 class 代码。我的onEdit, add and remove 函数里面的函数不起作用
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 });
};
我想要类似的功能,但代码必须在函数内部而不是 class
See the CodeSand box Here
我为你创建了功能组件 functional component
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Tabs, Button } from "and";
const { TabPane } = Tabs;
const Demo = () => {
const initPanes = [
{ title: "Tab 1", content: "Content of Tab Pane 1", key: "1" },
{ title: "Tab 2", content: "Content of Tab Pane 2", key: "2" }
];
const [panes, setPanes] = useState(initPanes);
const [newTabIndex, setNewTabIndex] = useState(0);
const [activeKey, setActiveKey] = useState(panes[0].key);
const onChange = (activeKey) => {
setActiveKey(activeKey);
};
const onEdit = (targetKey, action) => {
if (action === "remove") {
remove(targetKey);
}
};
const add = () => {
let newTabIndex2 = newTabIndex + 1;
let key = `newTab${newTabIndex2}`;
panes.push({ title: "New Tab", content: "New Tab Pane", key: key });
setPanes(panes);
setActiveKey(key);
setNewTabIndex(newTabIndex2);
};
const remove = (targetKey) => {
let lastIndex;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter((pane) => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
setActiveKey(panes[lastIndex].key);
} else {
setActiveKey(panes[0].key);
}
}
setPanes(newPanes);
};
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button onClick={add}>ADD</Button>
</div>
<Tabs
hideAdd
onChange={onChange}
activeKey={activeKey}
type="editable-card"
onEdit={onEdit}
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
{pane.content}
</TabPane>
))}
</Tabs>
</div>
);
};
ReactDOM.render(<Demo />, document.getElementById("container"));
我正在将 class 代码更改为用于自定义 Ant Design Tabs 的函数代码。 一切正常,但我无法更改 onEdit 功能。我该怎么做。
这里是里面的代码Class
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;
准确地说,我该如何在函数中编写此 class 代码。我的onEdit, add and remove 函数里面的函数不起作用
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 });
};
我想要类似的功能,但代码必须在函数内部而不是 class See the CodeSand box Here
我为你创建了功能组件 functional component
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Tabs, Button } from "and";
const { TabPane } = Tabs;
const Demo = () => {
const initPanes = [
{ title: "Tab 1", content: "Content of Tab Pane 1", key: "1" },
{ title: "Tab 2", content: "Content of Tab Pane 2", key: "2" }
];
const [panes, setPanes] = useState(initPanes);
const [newTabIndex, setNewTabIndex] = useState(0);
const [activeKey, setActiveKey] = useState(panes[0].key);
const onChange = (activeKey) => {
setActiveKey(activeKey);
};
const onEdit = (targetKey, action) => {
if (action === "remove") {
remove(targetKey);
}
};
const add = () => {
let newTabIndex2 = newTabIndex + 1;
let key = `newTab${newTabIndex2}`;
panes.push({ title: "New Tab", content: "New Tab Pane", key: key });
setPanes(panes);
setActiveKey(key);
setNewTabIndex(newTabIndex2);
};
const remove = (targetKey) => {
let lastIndex;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter((pane) => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
setActiveKey(panes[lastIndex].key);
} else {
setActiveKey(panes[0].key);
}
}
setPanes(newPanes);
};
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button onClick={add}>ADD</Button>
</div>
<Tabs
hideAdd
onChange={onChange}
activeKey={activeKey}
type="editable-card"
onEdit={onEdit}
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
{pane.content}
</TabPane>
))}
</Tabs>
</div>
);
};
ReactDOM.render(<Demo />, document.getElementById("container"));