javascript - redux-form 格式输入仅 onBlur

Question

在我的表单中，我有一个“金额”字段，该字段应始终显示 2 位小数。因此，例如，如果用户键入 3，则应将其转换为 3.00。如果他输入 3.1234525，它应该变成 3.12。

为了做到这一点，我依赖于 onBlur Prop 。基本上 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

Answer 1

只需使用 event.preventDefault 即可:

formatAmount(event) {
    const {
        blurField,
    } = this.props;
    event.preventDefault();
    blurField('myForm', 'amount', formatNumber(event.currentTarget.value, 2));
}