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"
});
}
私が何かを入力するたびに、入力フィールドがフォーカスを失いました。