フォームフィールドの入力にフォーカスが失われます

doubleの実装に取り組んでおり、ユーザが入力できるのはAccount Details & Account Currencyです。フォームフィールドの入力にフォーカスが失われます

データは次の形式でサーバーから取得されています。私は私のrender()機能で、以下の実施

{ 
    ..., 
    "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" 
     } 
     } 
    ]}, 
    ... 
}

。次のように

銀行口座

{_.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> 
    ) 
    })}

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

私が何かを入力するたびに、入力フィールドがフォーカスを失いました。

出典

2016-10-05 rahulthewall