在antd Form表單中select設(shè)置初始值操作
更新時間：2020年11月02日 10:44:33 作者：Jian_Shen_Zero
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<Form.Item label="作用對象">
{getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
rules: [{
required: false,
message: '作用對象'
}]
})(
<Select placeholder="請選擇作用對象">
{targetList.map(entity => <Option key={entity.id} value={entity.id}>{entity.name}</Option>)}
</Select>
)}
</Form.Item>
在getFieldDecorator('targetId',時添加初始值而不是在select標(biāo)簽中添加初始值
補(bǔ)充知識：解決antd 表單獲取不到默認(rèn)值的問題
使用 antd 的 4.x 版本，給表單設(shè)置初始值，但是獲取不到值
如果需要設(shè)置默認(rèn)值并展示到頁面上，需要設(shè)置兩個地方：
設(shè)置 defaultValue，這個是用來展示在頁面上的，例如：
<Form.Item label="Sex" name="sex" valuePropName="checked">
//這里的defaultValue
<Radio.Group defaultValue={1}>
<Radio value={1}>男</Radio>
<Radio value={0}>女</Radio>
</Radio.Group>
</Form.Item>
設(shè)置 initialValues，這個是用來獲取表單值的，例如：
<Form
name="basic"
onFinish={this.onFinish}
onFinishFailed={this.onFinishFailed}
initialValues={{
sex: 1
}}
>
<Form.Item label="Sex" name="sex" valuePropName="checked">
<Radio.Group defaultValue={1}>
<Radio value={1}>男</Radio>
<Radio value={0}>女</Radio>
</Radio.Group>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
register
</Button>
</Form.Item>
</Form>
以上這篇在antd Form表單中select設(shè)置初始值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動特效插件，面向手機(jī)、平板電腦等移動終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue實現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
在vue中，我們?nèi)绾瓮ㄟ^請求接口來訪問后端的數(shù)據(jù)呢?在這里簡單總結(jié)了一個小示例，對vue請求后端數(shù)據(jù)實例代碼感興趣的朋友一起看看吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這些年寫前端vue時經(jīng)常碰到虛擬DOM這個單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個東西就完了，因為感覺也沒有影響我實現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點時間探討下虛擬DOM相關(guān)的知識，給自己補(bǔ)補(bǔ)課2022-10-10
element中el-table局部刷新的實現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
關(guān)于vue項目中會出現(xiàn)一些需求,就是右鍵菜單項的功能實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
這篇文章主要介紹了vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置，本文通過實例代碼效果圖展示給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue代理報錯404問題及解決(vue配置proxy)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12