1. 程式人生 > >react專案中使用antd的form元件,動態設定input框的值

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:''});
}

記錄一下