Reactjs 表单字段在键入时失去输入焦点

我正在努力实现以下用户可以输入的

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（）

函数中实现了以下功能

银行账户

    {_.map(this.state.company.invoiceConfiguration.bankConfigs, (bankConfig, i) => {
      return (
        <div className="row" key={_.uniqueId("bankDetailRow_")}>
          <div className="small-12 medium-6 columns">
            <label>
              Account Details
              <textarea rows="6" value={bankConfig.bankDetails} onChange={event => this.onBankDetailsChange("bankDetails", i, event.target.value)} />
            </label>
          </div>
          <div className="small-12 medium-4 columns">
            <label>
              Currency
              <Select
                name="bankCurrency"
                placeholder="Bank Account Currency"
                value={bankConfig.currency.id}
                options={currencyTypeOptions}
                onChange={_.partial(this.onBankDetailsChange, "currency", i)} />
            </label>
          </div>
        </div>
      )
    })}

每次我键入内容时，输入字段都会失去焦点

从这里回答：

在我们的案例中，违规代码如下：

由于

键

是唯一的，因此每次状态更改时，它都会丢弃旧的div并在其位置添加一个新的div。它看起来一模一样，但它失去了焦点

解决方法是使用一个不会改变的

键

。在这里，这是有效的：

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"
    });
  }