antd Form 中 Form.Item里含有自己封装的组件，赋值和取值的问题_antd formitem 可以写自己的组件

问题描述

antd Form 中 Form.Item 有时会使用自己封装的组件，然后发现 Form 的 initialValues 不起作用，以及 onValuesChange 不会触发，获取不到值；

解决方案

封装的子组件中需要手动设置赋值和调用传值，代码如下：

import { memo } from 'react';
import { Select } from '@homed/mortise-ui';

import { SquareMini16pt } from '@homed/mortise-icons';
import styles from './index.less';

interface IProps {
  value?: string;
  onChange?: <T>(p: T) => void;
}

const StatusSelect = memo((props: IProps) => {
  const { onChange, value } = props;
  console.log(props);
  function handleChange<T>(value: T) {
    console.log(`selected ${value}`);
    onChange && onChange(value);
  }

  return (
    <Select allowClear onChange={handleChange} defaultValue={value}>
      <Select.Option value="0">
        <div className={styles.selectItem}>
          <SquareMini16pt color={'#07A45A'} />
          已启用
        </div>
      </Select.Option>
      <Select.Option value="1">
        <div className={styles.selectItem}>
          <SquareMini16pt color={'rgba(0, 0, 0, 0.36)'} />
          未启用
        </div>
      </Select.Option>
    </Select>
  );
});
export default StatusSelect;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38