在我的表单中,我有一个“金额”字段,它应该始终显示2个小数位。因此,例如,如果用户键入3,则应将其转换为3.00。如果他输入3.1234525,则应变为3.12。
为了做到这一点,我依靠onBlur属性。基本上,在onBlur时,我运行一个函数来正确格式化数字,并尝试在字段上设置新值。
以下是我的代码:
假设我输入数字 3,然后移动到表单中的下一个字段。我可以看到以下操作被调用:
因此,输入值仍为3。看起来,初始的onBlur事件“覆盖”了我通过调用
为了做到这一点,我依靠onBlur属性。基本上,在onBlur时,我运行一个函数来正确格式化数字,并尝试在字段上设置新值。
以下是我的代码:
import { blur as blurField } from 'redux-form/immutable';
...
const mapDispatchToProps = {
blurField,
};
...
export default connect(mapStateToProps, mapDispatchToProps)(Amount);
class AmountContainer extends Component {
props: PaymentMethodPropsType;
formatAmount(event) {
const {
blurField,
} = this.props;
blurField('myForm', 'amount', formatNumber(event.currentTarget.value, 2));
}
/**
* Render method for the component
* @returns {Element<*>} the react element
*/
render() {
const {
t,
amountValue,
} = this.props;
const amountLabel = t('form')('amountLabel');
return (
<Amount
amountLabel={amountLabel}
amountValue={amountValue}
normalize={onlyNumbersDecimals}
onBlur={(event: Event) => this.formatAmount(event)}
validation={[
isRequired(t('validation')('amountRequired')),
number(t('validation')('amountNotNumber')),
]}
/>
);
}
}
假设我输入数字 3,然后移动到表单中的下一个字段。我可以看到以下操作被调用:
{type: "@@redux-form/BLUR", meta: {…}, payload: "3.00"}
{type: "@@redux-form/BLUR", meta: {…}, payload: "3"}
因此,输入值仍为3。看起来,初始的onBlur事件“覆盖”了我通过调用
blurField
触发的事件。
formatAmount
传递给onBlur
,而不是通过箭头函数进行传递:onBlur={this.formatAmount.bind(this)}
。 - JJJe.preventDefault()
。并检查此问题:https://github.com/erikras/redux-form/issues/2768 我认为它与你遇到的问题有关。 - elbecitaonBlur={(event: Event) => this.props.input.onBlur(this.formatAmount(event))}
- Thaadikkaaran