react-antd使用form表單form.item內checkbox和radio等無默認值，解決怎么設置默認值

由於form表單內的值都是統一接管的，都在form.item標簽內的name=“”屬性內設置，一般情況下默認值是空的。就算設置綁定到state內也不會起作用：

這里自己查了網上很多要么比較老方法比較復雜要么就是改的東西太多要改成雙向綁定等這里查看官方文檔結合react的生命周期嘗試了一種比較簡單的方式

總結如下：

form表單內含有radios和checkbox的怎么設置它們默認值：

1：如果是自定義綁定事件如form onsubmit={fnsubmit}可以忽略：

自定義綁定就像input一樣自己監聽綁定事件一般在沒有form包裹的環境下

2：如果是使用表單控件：如const { form: { getFieldDecorator } } = this.props 可忽略

網上搜索很多基本都是用到了getFieldDecorator ，雙向綁定等，需要改變基於form的受控組件，比較麻煩這里不推薦也容易出錯

3：幾個知識點：

Form表單中雙向數據綁定：getFieldDecorator(key)(組件)；
Form表單中設置一組輸入控件的值：setFieldsValue({key:value})；
Form表單中獲取一組輸入控件的值，如不傳入參數，則獲取全部組件的值：getFieldsValue()；

4：最簡單的解決方案：

只是做到給每個值初始化所以越簡單越好

要用到 ref來獲取表單實例dom並從dom中獲取對應的初始化方法：setFieldsValue

一定要注意：獲取ref要在componentDidMount千萬不要在render內不然會報錯獲取不到ref相關的表單方法

直接在componentDidMount生命周期內利用form提供的方法設置默認值就可以在頁面初始化時展示處默認選中狀態

5：代碼步驟：

    1：在form表單組件設置ref

 <Form ref={this.formRef}>

2:不要忘了在class內添加創建（ref的使用規范）

formRef = React.createRef();

3：在component直接調用form的實例化設置值方法

componentDidMount(){//掛載時 獲取ref要在這里就可以設置默認值
this.onFill()
}

onFill = () => {
console.log(this.formRef.current)
console.log(this.props)
this.formRef.current.setFieldsValue({
jiemu:'節目四',
reapeat:'每天'
})
};

完整代碼參考：

import React from 'react'
import {Form,Select,Button,Upload,Radio} from 'antd'

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 12 },
};
const labelCol={
    span: 3, offset: 12
}
const validateMessages = {
    required: '${label} 不能為空!',//必選規則
    types: {
      email: '${label} is not validate email!',
      number: '${label} is not a validate number!',
    },
    number: {
      range: '${label} 必須在 ${min} 和 ${max}之間',
    },
};
//綁定上傳的date
const normFile = e => {//這個很重要，如果沒有將上傳失敗並報錯
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
    };
class FormMonth extends React.Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    formRef = React.createRef();
    onFill = () => {
        console.log(this.formRef.current)
        console.log(this.props)
        this.formRef.current.setFieldsValue({
            // jiemu:'節目一',
            // reapeat:'每天'
        })
        console.log(this.formRef.current.getFieldValue())//這里能夠獲取到初始化掛載的值
    };
    componentDidMount(){//掛載時 獲取ref要在這里就可以設置默認值
        this.onFill()
    }
    render(){
        // this.onFill()//這時候獲取formRef 會報錯
        const OptArr=['節目一','節目二','節目三','節目四','節目五','節目六']
        const {Option} = Select
        const onFinish = (v)=>{
            console.log(v)
        }
        return(
            <div>
                <Form ref={this.formRef} {...labelCol} {...layout} onFinish={onFinish}>
                    {/* 選擇節目 */}
                   <Form.Item name="jiemu" label="節目">
                        <Select>
                            {
                                OptArr.map((v)=>{
                                    return(
                                    <Option key={v} value={v}>{v}</Option>
                                    )
                                })
                            }
                        </Select>
                   </Form.Item>
                   {/* 上傳 */}
                   {/* valuePropName="fileList"  getValueFromEvent={normFile}  這兩個需同時*/}
                   <Form.Item name="upload"  valuePropName="fileList"  getValueFromEvent={normFile} label="上傳">
                   <Upload name="logo" action="/upload.do" listType="picture">
                        <Button>添加素材</Button>
                   </Upload>
                   </Form.Item>
                   {/* 重復 */}
                   <Form.Item label="重復" name="reapeat">
                        <Radio.Group>
                        <Radio value="每天">每天</Radio>
                        <Radio value="每周">每周</Radio>
                        <Radio value="每月">每月</Radio>
                        <Radio value="特別日">特別日</Radio>
                        <Radio value="自定義">自定義</Radio>
                        </Radio.Group>
                </Form.Item> 
                   {/* 提交 */}
                   <Form.Item
                   wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                        <Button type='primary' htmlType="submit">提交</Button>
                   </Form.Item>
                </Form>
            </div>
        )
    }
}
export default FormMonth

效果如下：

有默認值的：

每次一切換到頁面就會含有設置好的默認值