在模糊中规范化 redux 表单字段值

Question

触发onBlur时，如何规范化redux-form字段的值。我尝试了以下方法，但似乎不起作用：

const normalizeAmount = (node) => {
const newValue = node.target.value;
return `--${newValue}--`;
};
render() {
const { handleSubmit, pristine, invalid, submitting, error, blur } = this.props;
return (
<form onSubmit={handleSubmit(submit)}>
<div name="form-container">
<Field
name="foo"
component={CustomInput}
onBlur={blurValue => blur(normalizeValue(blurValue))}
/> 
...
);

Answer 1

通过将 onBlur 移动到CustomInput组件来解决此问题，我在其中添加了

return (
<div>
<input
...
onBlur={value => props.input.onBlur(normalizeValue(value))}
/>
</div>
);

在表单组件中，该字段将只有：

<Field
name="foo"
component={CustomInput}
/> 

Answer 2

实际上normalize是在字段更改之前使用的，因此它在事件之前使用onBlur但您试图以错误的方式使用它。

您可以使用这样的东西并允许用户仅输入数字：

<Field component={TextInputField}                                     
onBlur={value => this.doWhatEverYouNeed(value)}
normalize={value => value.replace(/[^d]/g, '')}
/>

有关规范化的更多详细信息，请参阅 https://redux-form.com/8.2.2/examples/normalizing/