antd使用中遇到的问题

基于antd 3.26.16版本中，使用hook，新增弹窗使用form表单遇到的问题

1.首先导出时候需要加上Form.create

　　正确：export default Form.create({name: 'sourceDialog'})(SourceDialog);

　　错误：export default SourceDialog;

2.在编写表单时，Radio组件设置defaultValue报错

报错：Warning: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead.

　　错误代码：

<Form.Item label='模式'>
                        {getFieldDecorator('method', {
                            initialValue: sourceForm.method,
                            rules: [{required: true, message: '请选择模式'}],
                        })(
                            <Radio.Group defaultValue={sourceForm.method} onChange={(val) => {
                                setSourceForm({
                                    ...setSourceForm,
                                    method: val,
                                })
                            }}>
                                {tableKeys.map((item) =>
                                    <Radio.Button value={item.name} key={item.key}>{item.name}</Radio.Button>
                                )}
                            </Radio.Group>
                        )}
</Form.Item>

　　正确代码：

<Form.Item label='模式'>
                        {getFieldDecorator('method', {
                            initialValue: sourceForm.method,
                            rules: [{required: true, message: '请选择模式'}],
                        })(
                            <Radio.Group onChange={(val) => {
                                setSourceForm({
                                    ...setSourceForm,
                                    method: val,
                                })
                            }}>
                                {tableKeys.map((item) =>
                                    <Radio.Button value={item.name} key={item.key}>{item.name}</Radio.Button>
                                )}
                            </Radio.Group>
                        )}
</Form.Item>

　总结：Form.Item 子组件的 defaultValue 参数都要被 getFieldDecorator 中的 initialValue 替换。

 3.在组件Switch中设置报错

报错：[antd: Switch] `value` is not validate prop, do you mean `checked`?

错误代码：

<Form.Item label='kerberos认证'>
                        {getFieldDecorator('kerberos', {
                            initialValue: sourceForm.kerberos,

                        })(
                            <Switch checkedChildren="是" unCheckedChildren="否" disabled={disabled} />
                        )}
</Form.Item>

正确代码：

<Form.Item label='kerberos认证'>
                        {getFieldDecorator('kerberos', {
                            initialValue: sourceForm.kerberos,
                            valuePropName: 'checked'
                        })(
                            <Switch checkedChildren="是" unCheckedChildren="否" disabled={disabled} />
                        )}
</Form.Item>

　总结：发现在getFieldDecorator包裹下的Switch组件无法显示为true的状态，Switch组件是通过checked的属性来显示状态的，所以需要一个额外的属性valuePropName