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/

上找到

规范化LTl上的redux-form字段值

2 个答案: