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

Answer 1

只需使用event.preventDefault即可：

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

Answer 2

嘿，这有点迟了，但是我发现了一种有效且简单的解决方法。我发送on模糊道具，将函数绑定到表单范围，然后使用内置的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));
}}

redux-form格式输入仅适用于onBlur

2 个答案: