解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
如果在Form表單中onChange事件中，手寫了一個(gè)setFieldsValue, 則不會(huì)生效。
原因是因?yàn)?/h3>
Form表單會(huì)在手寫的onChange事件之后執(zhí)行內(nèi)部的setFieldsValue，所以會(huì)將我們之前手寫的setFieldsValue給覆蓋掉。
解決方案
1. 使用setTimeout延時(shí)。此方案不推薦
2. 使用getValueFromEvent. 是當(dāng)onChange的時(shí)候，更改form表單的值的情景下使用
<FormItem label="路由節(jié)點(diǎn)" {...nodelayout}>
? ? ?{getFieldDecorator(`node`, {
? ? ? ? rules: [
? ? ? ? ? ?{
? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? message: '選擇要指定的路由節(jié)點(diǎn)',
? ? ? ? ? ? }],
? ? ? ? getValueFromEvent: (val: any) => {
? ? ? ? ? ? let nodesArr = [] as any;
? ? ? ? ? ? ?for (let item of transferList) {
? ? ? ? ? ? ? ? ?for (let j of val) {
? ? ? ? ? ? ? ? ? ? if ((item as any).id === j) {
? ? ? ? ? ? ? ? ? ? ? nodesArr.push(item);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?}
? ? ? ? ? ? ?return nodesArr;
? ? ? ? }
? ? ?})(
? ? <Transfer
? ? ? ?operations={['>>', '<<']}
? ? ? ?dataSource={transferList}
? ? ? ?filterOption={(inputValue: any, option: any) =>
? ? ? ? ? option.value.indexOf(inputValue) > -1
? ? ? ?}
? ? ? ?showSearch
? ? ? ?lazy={false}
? ? ? ?targetKeys={targetKeys}
? ? ? ?onChange={transferHandleChange}
? ? ? ?onSearch={transferHandleSearch}
? ? ? ?render={item => item.value}
? ? />,
)}
</FormItem>3. 如果你只想簡(jiǎn)單的更改表單的值setFieldsValue，而不是在onChange的時(shí)候觸發(fā)。那么可以使用normalize. 與上述的getValueFromEvent類似，都是option的一個(gè)屬性。
antd Design Form setFieldsValue的使用
最近項(xiàng)目使用的是antd Design 4.x 版本，碰到個(gè)需要加載后端數(shù)據(jù)并展示，并且用戶可以進(jìn)行修改的需求，前端采用的是antd的Form表單來實(shí)現(xiàn)
組件加載的時(shí)候向后端請(qǐng)求數(shù)據(jù)
componentDidMount() {
? ? ? ? gainCountry().then(res => {
?? ??? ??? ?// 這里進(jìn)行數(shù)據(jù)請(qǐng)求
?? ??? ??? ?......
? ? ? ? })
? ? }form表單要回填數(shù)據(jù)一般會(huì)想到的是initialValues，但是這是適用于初始化值的時(shí)候，官方文檔的原話：“initialValues 不能被 setState 動(dòng)態(tài)更新，你需要用 setFieldsValue 來更新”。
搜索一番setFieldsValue的使用，基本上都是：this.props.form.setFieldsValue, props自帶form，試用之后發(fā)現(xiàn)報(bào)錯(cuò)，this.props下沒有form，這個(gè)好像只適用于antd 3.x
解決
antd4.x 中使用setFieldsValue 是通過ref來進(jìn)行操作，如下所示：
class Index extends Component{
?? ?constructor(props) {
? ? ? ? super(props)
? ? ? ? this.state = { }
? ? }
? ? // 創(chuàng)建一個(gè)ref
? ? formRef = React.createRef()
? ? render(){
? ? ?? ?return{
? ? ?? ? ? ? {/* 綁定到Form身上*/}
? ? ? ? ?? ? <Form ref={this.formRef}>
? ? ? ? ? ? ? ? <Form.Item name="example">
? ? ? ? ? ? ? ? ? ?<Input />
? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ?</Form>
? ? ? ? }
? ? }
}
export default BaseInfo在需要的地方進(jìn)行使用：
// example 為Form.Item中的name
this.formRef.current.setFieldsValue({
? ? ? ?example: ‘從后臺(tái)返回要顯示的值',
?? ??? ??? ??? ?
})結(jié)束語
官方文檔中都是有相關(guān)說明的，setFieldsValue 的使用我是在文檔中的一個(gè)例子中找到的，碰到問題的時(shí)候還是要多閱讀文檔
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了分析總結(jié)20道Vue高頻面試題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本文主要介紹了element的$notify注意點(diǎn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3?函數(shù)式彈窗的實(shí)例小結(jié)
這篇文章主要介紹了Vue3?函數(shù)式彈窗的實(shí)例小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章給大家介紹了vue實(shí)現(xiàn)輪播圖的多種方式,文中給出了四種實(shí)現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-02-02
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡(jiǎn)單使用,需要的朋友可以參考下2018-02-02
vue登錄頁實(shí)現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁實(shí)現(xiàn)使用cookie記住7天密碼功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11