解決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: ‘從後臺返回要顯示的值', })
結束語
官方文檔中都是有相關說明的,setFieldsValue 的使用我是在文檔中的一個例子中找到的,碰到問題的時候還是要多閱讀文檔
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- react使用antd的上傳組件實現文件表單一起提交功能(完整代碼)
- antd select 多選限制個數的實現代碼
- antd vue v-decorator的取值與賦值問題
- react antd實現動態增減表單
- 關於react ant 組件 Select下拉框 值回顯的問題