72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
|
|
import { Button, Col, Form, Input, Row, Space, Typography } from "antd";
|
|
const { Text } = Typography;
|
|
|
|
interface IProps {
|
|
onChange?: Function;
|
|
styles?: React.CSSProperties;
|
|
}
|
|
|
|
const Chatpter = (props: IProps) => {
|
|
const [form] = Form.useForm();
|
|
|
|
const onBlur = () => {
|
|
console.log(form.getFieldsValue().chapter);
|
|
};
|
|
|
|
return (
|
|
<div style={{ ...props.styles }}>
|
|
<Form form={form} style={{ maxWidth: 600 }}>
|
|
<Form.List name="chapter">
|
|
{(fields, { add, remove }, { errors }) => (
|
|
<>
|
|
{fields.map((field, index) => (
|
|
<Form.Item required={false} key={field.key}>
|
|
<Form.Item
|
|
{...field}
|
|
validateTrigger={["onChange", "onBlur"]}
|
|
rules={[{ required: true, message: "请输入章节名称" }]}
|
|
noStyle
|
|
>
|
|
<Input
|
|
placeholder="请输入章节名称"
|
|
onBlur={onBlur}
|
|
style={{ width: "60%" }}
|
|
/>
|
|
<Text>{JSON.stringify(field)}</Text>
|
|
</Form.Item>
|
|
{fields.length > 1 ? (
|
|
<MinusCircleOutlined onClick={() => remove(field.name)} />
|
|
) : null}
|
|
</Form.Item>
|
|
))}
|
|
<Form.Item>
|
|
<Space>
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => add("The head item", 0)}
|
|
block
|
|
icon={<PlusOutlined />}
|
|
>
|
|
1级章节
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => add("The head item", 0)}
|
|
block
|
|
icon={<PlusOutlined />}
|
|
>
|
|
2级章节
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form.List>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chatpter;
|