redux-仅onBlur表单格式输入
redux-仅onBlur表单格式输入
提问于 2017-11-03 17:46:24
在我的表单中，我有一个"amount“字段，它应该总是显示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时触发的事件
回答 2
Stack Overflow用户
发布于 2018-05-16 22:15:55
只需使用event.preventDefault即可：
formatAmount(event) {
const {
blurField,
} = this.props;
event.preventDefault();
blurField('myForm', 'amount', formatNumber(event.currentTarget.value, 2));
}Stack Overflow用户
发布于 2018-08-16 04:29:24
嘿，这有点晚了，但我已经找到了一种有效而简单的方法。我发送了on blur prop，将该函数绑定到forms作用域，并使用内置的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));
}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47092665
复制相关文章
相似问题
腾讯云开发者
