表單字段失去輸入焦點在打字上

Question

我正在實施以下double ，用戶可以輸入： Account Details & Account Currency 。

數據以以下格式從服務器檢索：

{
  ...,
  "invoiceConfiguration": {
    "id": 290271069734815,
    "bankConfigs": [
      {
        "bankDetails": "Bank Details Euro",
        "currency": {
          "id": 17592186045607,
          "name": "Euro",
          "iso": "EUR"
        }
      },
      {
        "bankDetails": "USD Test Bank details",
        "currency": {
          "id": 17592186045610,
          "name": "US Dollar",
          "iso": "USD"
        }
      }
    ]},
    ...
}

我在我的render()函數中實現了以下內容。

銀行賬戶

onBankDetailsChange(key, pos, val) {
    if (key === "currency") {
      val = {
        id: val.value
      };
    }
    const company = this.state.company;
    let bankAccounts = company.invoiceConfiguration.bankConfigs;
    bankAccounts[pos][key] = val;
    company.invoiceConfiguration.bankConfigs = bankAccounts;
    this.setState({
      company,
      status: "unsaved"
    });
  }

onBankDetailsChange()函數定義如下：

 onBankDetailsChange(key, pos, val) { if (key === "currency") { val = { id: val.value }; } const company = this.state.company; let bankAccounts = company.invoiceConfiguration.bankConfigs; bankAccounts[pos][key] = val; company.invoiceConfiguration.bankConfigs = bankAccounts; this.setState({ company, status: "unsaved" }); }

每次輸入內容時，輸入字段都會失去焦點。

Answer 1

從這里回答： http : //reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/

在我們的例子中，有問題的代碼在這里：

<div className="row" key={_.uniqueId("bankDetailRow_")}>

由於key是唯一的，每次狀態都會丟棄舊的 div 並在其位置添加一個新的 div。 它看起來相同，但它失去了焦點。

解決方案是使用一個不會改變的key 。 在這里，這有效：

<div className="row" key={i}>