react項目中使用antd的form組件,動態設置input框的值

問題:

創建賬號時,輸入賬號後不搜索直接保存,提示查詢後,再點搜索就不能搜索這個賬號了

原因:

點擊保存之後,對錶單進行了驗證,導致之後請求的數據無法在更新到input框中,也就是說即使在state中有值,也不會更新initialValue值,就導致搜索後的值不能正確填入input中,表單也就提交不了。

解決辦法:

不使用initialValue設置動態更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用於動態更新值,就可以解決了。

if (result.code===0) {
      if (result.data) {
              this.props.form.setFieldsValue({name:result.data});
      }
}

ps:

還有一個問題,如果輸入了賬號進行搜索後匹配了name,也填入了input框中。但是又修改了賬號,然後直接提交,就會導致賬號和name不匹配,也就是name是存在的,但就不是對應的賬號了。會導致保存之後,如果正確的賬號和name已經存在,數據庫出現數據存儲問題。

解決:

給賬號輸入的Input框添加onChange事件,來觸發如果有改變就清空name框,防止錯誤提交

change = (event) => {
   this.props.form.setFieldsValue({name:''});
}

記錄一下

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章