ant-design/components/form/demo/ref-item.tsx
lijianan b9a6b7b578
demo: update demo (#40318)
* demo: update demo

* add form

* clear

* add Select

* add

* fix style

* fix style

* fix

* revert
2023-01-19 15:37:54 +08:00

45 lines
1009 B
TypeScript

import React from 'react';
import type { InputRef } from 'antd';
import { Button, Form, Input } from 'antd';
const App: React.FC = () => {
const [form] = Form.useForm();
const ref = React.useRef<InputRef>(null);
return (
<Form form={form} initialValues={{ list: ['light'] }} style={{ maxWidth: 600 }}>
<Form.Item name="test" label="test">
<Input ref={ref} />
</Form.Item>
<Form.List name="list">
{(fields) =>
fields.map((field) => (
<Form.Item {...field} key={field.key}>
<Input ref={ref} />
</Form.Item>
))
}
</Form.List>
<Button
htmlType="button"
onClick={() => {
form.getFieldInstance('test').focus();
}}
>
Focus Form.Item
</Button>
<Button
onClick={() => {
form.getFieldInstance(['list', 0]).focus();
}}
>
Focus Form.List
</Button>
</Form>
);
};
export default App;