Form

1
() => {
2
  const onFinish = (values) => {
3
    console.log(values);
4
  };
5
  return (
6
    <Form onFinish={onFinish} initialValues={{ username: 'wayne' }}>
7
      <Row gutter={[10, 40]}>
8
        <Col span={6}>
9
          <FormItem
10
            name="username"
11
            label="Username"
12
            help="user name must input"
13
            rules={[{ required: true, message: 'Please input your username!' }]}
14
          >
15
            <Input />
16
          </FormItem>
17
        </Col>
18
        <Col span={6}>
19
          <FormItem
20
            name="uid"
21
            label="用户名"
22
            help="help content"
23
            rules={[{ required: true, message: 'Please input your uid!' }]}
24
          >
25
            <Input />
26
          </FormItem>
27
        </Col>
28
        <Col span={6}>
29
          <FormItem name="group" label="Group" help="help content" tooltip="tooltip 内容 content">
30
            <Input />
31
          </FormItem>
32
        </Col>
33
        <Col span={6}>
34
          <FormItem label="BACKUP_DATE" name="cycle">
35
            <CheckboxGroup>
36
              <Checkbox label="China" value="China" />
37
              <Checkbox label="USA" value="USA" />
38
            </CheckboxGroup>
39
          </FormItem>
40
        </Col>
41
        <Col span={6}>
42
          <FormItem label="Radio" name="radio">
43
            <RadioGroup>
44
              <Radio label="China" value="China" />
45
              <Radio label="USA" value="USA" />
46
            </RadioGroup>
47
          </FormItem>
48
        </Col>
49
      </Row>
50
      <button type="submit">Submit</button>
51
    </Form>
52
  );
53
};
54

1
() => {
2
  const [form] = useForm();
3
  const getFieldErrors = () => {
4
    console.log(form.validateFields());
5
  };
6
  const onFinish = (values) => {
7
    console.log(values);
8
  };
9
  const { Add, Trash } = KubeIcon;
10
  return (
11
    <Form onFinish={onFinish} form={form}>
12
      <FormList name="users">
13
        {(fields, { add, remove }) => (
14
          <>
15
            {fields.map(({ key, name, ...restField }) => (
16
              <Row gutter={[10, 40]} key={key}>
17
                <Col span={5}>
18
                  <FormItem
19
                    {...restField}
20
                    name={[name, 'first']}
21
                    label="Fist Name"
22
                    help="user name must input"
23
                    rules={[{ required: true, message: 'Please input your username!' }]}
24
                  >
25
                    <Input />
26
                  </FormItem>
27
                </Col>
28
                <Col span={5}>
29
                  <FormItem
30
                    {...restField}
31
                    name={[name, 'last']}
32
                    label="Last Name"
33
                    help="help content"
34
                    rules={[{ required: true, message: 'Please input your uid!' }]}
35
                  >
36
                    <Input />
37
                  </FormItem>
38
                </Col>
39
                <Col span={1}>
40
                  <Button variant="text" onClick={() => remove(name)}>
41
                    <Trash size={16} />
42
                  </Button>
43
                </Col>
44
              </Row>
45
            ))}
46
            <Row>
47
              <Col span={12}>
48
                <Button onClick={() => add()}>
49
                  <Add size={16} />
50
                </Button>
51
              </Col>
52
            </Row>
53
          </>
54
        )}
55
      </FormList>
56
      <button type="button" onClick={getFieldErrors}>
57
        Submit
58
      </button>
59
    </Form>
60
  );
61
};
62