양식 입력시 입력 입력이 손실 됨

사용자가 입력 할 수있는 double을 구현 중이며 Account DetailsAccount 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