mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 22:11:37 +08:00
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Form, Input } from 'antd';
|
|
|
|
interface FieldData {
|
|
name: string | number | (string | number)[];
|
|
value?: any;
|
|
touched?: boolean;
|
|
validating?: boolean;
|
|
errors?: string[];
|
|
}
|
|
|
|
interface CustomizedFormProps {
|
|
onChange: (fields: FieldData[]) => void;
|
|
fields: FieldData[];
|
|
}
|
|
|
|
const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => (
|
|
<Form
|
|
name="global_state"
|
|
layout="inline"
|
|
fields={fields}
|
|
onFieldsChange={(_, allFields) => {
|
|
onChange(allFields);
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="username"
|
|
label="Username"
|
|
rules={[{ required: true, message: 'Username is required!' }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
|
|
const App: React.FC = () => {
|
|
const [fields, setFields] = useState<FieldData[]>([{ name: ['username'], value: 'Ant Design' }]);
|
|
|
|
return (
|
|
<>
|
|
<CustomizedForm
|
|
fields={fields}
|
|
onChange={(newFields) => {
|
|
setFields(newFields);
|
|
}}
|
|
/>
|
|
<pre className="language-bash">{JSON.stringify(fields, null, 2)}</pre>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|