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