输入金额:
失去焦点后展示千位符:
聚焦时移除千位符:
HTML代码:
<div className="card-box-title"><img src={icon2} alt="" />新資金額度計算器</div>
<div className="card-box-subtitle">擬存入新資金</div>
<div className="input-wrap">
<div className="input-box">
<input
name="amount"
type="text"
placeholder="請輸入金額"
value={this.state.proposedNewFunds || ''}
onChange={(e) => this.handleAmountChange(e)}
onBlur={(e) => this.handleAmountBlur(e)}
onFocus={(e) => this.handleAmountFocus(e)}
maxLength={20}
/>
<Select value={currencyCode} onChange={(val) => this.handleChangeCurrency(val)}>
{prdtCurrency.localeDictList.map((item) => (
<Option key={item.value} value={item.value}>
{item.label}
</Option>
))}
</Select>
</div>
<div className="button-wrap">
<Button type="primary" style={{ marginRight: '10px' }} disabled={!this.state.proposedNewFunds} onClick={() => this.handleConfirm()}>確認</Button>
<Button onClick={() => this.handleReset()}>重置</Button>
</div>
</div>
聚焦、失焦、输入 代码:
/**
* 处理金额输入
*/
handleAmountChange = (event) => {
let value = event.target.value
// 只允许数字、小数点和负号
value = value.replace(/[^\d.-]/g, '')
// 限制只能有一个小数点
const parts = value.split('.')
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join('');
}
// 更新状态
this.setState({ proposedNewFunds: value })
}
/**
* 失去焦点时格式化为千分位
*/
handleAmountBlur = (event) => {
const value = event.target.value
if (value !== '') {
try {
const numericValue = parseFloat(value)
if (!isNaN(numericValue)) {
const formattedValue = numericValue.toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
this.setState({ proposedNewFunds: formattedValue })
}
} catch (error) {
console.error('金額格式化出錯:', error)
}
}
}
/**
* 获取焦点时显示原始数字
*/
handleAmountFocus = (event) => {
const formattedValue = event.target.value;
// 移除千分位逗号,恢复为纯数字
const rawValue = formattedValue.replace(/,/g, '');
this.setState({ proposedNewFunds: rawValue });
}