Redux-Form：仅在失去焦点时格式化输入

Question

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

为了做到这一点，我依靠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触发的事件。

- gabric

---

尝试直接将formatAmount传递给onBlur，而不是通过箭头函数进行传递：onBlur={this.formatAmount.bind(this)}。 - JJJ

尝试在字段元素上使用e.preventDefault()。并检查此问题：https://github.com/erikras/redux-form/issues/2768 我认为它与你遇到的问题有关。 - elbecita

你尝试过类似这样的代码吗？onBlur={(event: Event) => this.props.input.onBlur(this.formatAmount(event))} - Thaadikkaaran

@gabric 我也有同样的问题，你找到解决方法了吗？ - Leff

Answer 1

只需使用 event.preventDefault 就可以了：

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

- Ludwig

Answer 2

嘿，这有点晚了，但我找到了一种有效而简单的方法来解决这个问题。我将 on blur 属性发送到绑定到表单范围的函数中，并使用内置的 redux-form 函数（change）使用格式化值更新字段值。这种技术的有趣之处在于，你需要使用 setTimeout 将执行时间设置为 0，才能使其正常工作。例如：

onBlur={e => {
  let value = e.target.value;
  * Format or update value as needed *
  setTimeout(() => this.props.change(* FIELD NAME *, value));
}}

- Riley Davidson