|
| 1 | +import Form, { Field } from 'rc-field-form'; |
1 | 2 | import React from 'react';
|
2 |
| -import Form, { Field, FormInstance } from 'rc-field-form'; |
3 | 3 | import Input from './components/Input';
|
4 | 4 |
|
5 | 5 | export default () => {
|
6 | 6 | const [form] = Form.useForm();
|
7 |
| - const [show, setShow] = React.useState(true); |
8 |
| - const [timeoutShow, setTimeoutShow] = React.useState(show); |
9 |
| - |
10 |
| - React.useEffect(() => { |
11 |
| - if (show) { |
12 |
| - console.log( |
13 |
| - 'show', |
14 |
| - ); |
15 |
| - form.setFieldsValue({ |
16 |
| - name: '123', |
17 |
| - }); |
18 |
| - } |
19 |
| - |
20 |
| - const id = setTimeout(() =>{ |
21 |
| - setTimeoutShow(show); |
22 |
| - }, 300); |
23 |
| - |
24 |
| - return () => clearTimeout(id); |
25 |
| - }, [show]); |
26 | 7 |
|
| 8 | + return ( |
| 9 | + <Form form={form} preserve={false}> |
| 10 | + <Field name="name"> |
| 11 | + <Input placeholder="Username" /> |
| 12 | + </Field> |
27 | 13 |
|
| 14 | + <Field dependencies={['name']}> |
| 15 | + {() => { |
| 16 | + return form.getFieldValue('name') === '1' ? ( |
| 17 | + <Field name="password"> |
| 18 | + <Input placeholder="Password" /> |
| 19 | + </Field> |
| 20 | + ) : null; |
| 21 | + }} |
| 22 | + </Field> |
28 | 23 |
|
29 |
| - return ( |
30 |
| - <> |
31 |
| - <button onClick={() =>{ |
32 |
| - setShow(!show); |
33 |
| - }}>Trigger</button> |
34 |
| - { |
35 |
| - timeoutShow && <Form form={form}> |
36 |
| - <Form.Field name="name"> |
37 |
| - <Input /> |
38 |
| - </Form.Field> |
39 |
| - </Form> |
40 |
| - } |
41 |
| - </> |
| 24 | + <Field dependencies={['password']}> |
| 25 | + {() => { |
| 26 | + const password = form.getFieldValue('password'); |
| 27 | + console.log('>>>', password); |
| 28 | + return password ? ( |
| 29 | + <Field name="password2"> |
| 30 | + <Input placeholder="Password 2" /> |
| 31 | + </Field> |
| 32 | + ) : null; |
| 33 | + }} |
| 34 | + </Field> |
| 35 | + </Form> |
42 | 36 | );
|
43 | 37 | };
|
0 commit comments