问题描述
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;