Antd中Form表單的onChange事件中執行setFieldsValue不生效怎么解決

本篇內容主要講解“Antd中Form表單的onChange事件中執行setFieldsValue不生效怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Antd中Form表單的onChange事件中執行setFieldsValue不生效怎么解決”吧!

Antd中Form表單的onChange事件中執行setFieldsValue不生效

如果在Form表單中onChange事件中，手寫了一個setFieldsValue, 則不會生效。

原因是因為

Form表單會在手寫的onChange事件之后執行內部的setFieldsValue，所以會將我們之前手寫的setFieldsValue給覆蓋掉。

解決方案

1. 使用setTimeout延時。此方案不推薦

2. 使用getValueFromEvent. 是當onChange的時候，更改form表單的值的情景下使用

<FormItem label="路由節點" {...nodelayout}>
     {getFieldDecorator(`node`, {
        rules: [
           {
              required: true,
              message: '選擇要指定的路由節點',
            }],
        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. 如果你只想簡單的更改表單的值setFieldsValue，而不是在onChange的時候觸發。那么可以使用normalize. 與上述的getValueFromEvent類似，都是option的一個屬性。

antd Design Form setFieldsValue的使用

最近項目使用的是antd Design 4.x 版本，碰到個需要加載后端數據并展示，并且用戶可以進行修改的需求，前端采用的是antd的Form表單來實現

組件加載的時候向后端請求數據

componentDidMount() {
        gainCountry().then(res => {
            // 這里進行數據請求
            ......
        })
    }

form表單要回填數據一般會想到的是initialValues，但是這是適用于初始化值的時候，官方文檔的原話：“initialValues 不能被 setState 動態更新，你需要用 setFieldsValue 來更新”。

搜索一番setFieldsValue的使用，基本上都是：this.props.form.setFieldsValue, props自帶form，試用之后發現報錯，this.props下沒有form，這個好像只適用于antd 3.x

解決

antd4.x 中使用setFieldsValue 是通過ref來進行操作，如下所示：

class Index extends Component{
    constructor(props) {
        super(props)
        this.state = { }
    }
    // 創建一個ref
    formRef = React.createRef()
    render(){
        return{
             {/* 綁定到Form身上*/}
             <Form ref={this.formRef}>
                <Form.Item name="example">
                   <Input />
                </Form.Item>
             </Form>
        }
    }
}
export default BaseInfo

在需要的地方進行使用：

// example 為Form.Item中的name
this.formRef.current.setFieldsValue({
       example: ‘從后臺返回要顯示的值',
                
})

到此，相信大家對“Antd中Form表單的onChange事件中執行setFieldsValue不生效怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！