在Ant Design中,可以使用
组件来创建静态表单数组。下面是一个包含代码示例的解决方法:
首先,安装Ant Design依赖:
npm install antd
然后,创建一个名为FormListExample.js
的文件,并将以下代码复制到文件中:
import React from 'react';
import { Form, Input, Button } from 'antd';
const FormListExample = () => {
const onFinish = (values) => {
console.log('Form values:', values);
};
return (
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
{fields.length > 1 ? (
) : null}
))}
>
)}
);
};
export default FormListExample;
最后,在你的组件中引入FormListExample
组件并使用它:
import React from 'react';
import FormListExample from './FormListExample';
const App = () => {
return (
Static Form List Example
);
};
export default App;
现在你可以运行你的React应用并访问该页面,就会看到一个可以创建静态表单数组的表单界面。你可以点击"Add user"按钮来动态添加用户输入字段,并且可以点击"Remove"按钮来删除对应的字段。当你点击"Submit"按钮时,会将表单的值打印到控制台上。
注意:以上代码示例需要结合React和Ant Design的环境来运行。