Question

我正在使用react-native（Android），我使用的是redux-form 6.1.1。

我注意到一种奇怪的行为，即当我从输入字段中删除焦点（模糊）时，redux-form不会执行验证，但提交验证是按预期工作的。

请在这里指导我。以下是我的代码。

文字字段组件

<TextInput
  keyboardType={ textType ? textType : 'default' }
  onChangeText={ (val) => onChange(val) }
  value={ value }
  underlineColorAndroid="transparent"
  style={ styleInput }
  {...this.props}
/>

{/* Error message */}
<View>
  {
    touched && error ?
    <Text>{error}</Text>
    : null
  }
</View>

此文本字段组件的实现如下

<Field
  component={TextField}
  name="phoneNumber"
  placeholder="Mobile Number"
  styleInput={styles.inputs}
  styleInputWrap={styles.inputView}
/>

验证功能

function validate(values) {
  const err = {};

  // common function for phone number validation
  validatePhoneNumber(err, 'phoneNumber', values.phoneNumber);

  return err;
}

注意：我从 触及＆amp;＆amp;错误 条件错误包含所需的错误消息，但即使在切换/聚焦到另一个输入字段后，触摸仍然为false。一旦我点击提交按钮，触摸标志设置为true。

Answer 1

我找到了相关的解决方法，但如果他们有更好的方法，那么请更新。

下面是我更新的代码（带有工作模糊事件）。

更新了文字字段组件

const {
  input: { value, onChange, onBlur }
} = this.props;
... 
...
<TextInput
  keyboardType={ textType ? textType : 'default' }
  onChangeText={ val => onChange(val) }
  onBlur={ val => onBlur(val) } {/* <--- added onBlur function */}
  value={ value }
  underlineColorAndroid="transparent"
  style={ styleInput }
  {...this.props}
/>

{/* Error message */}
<View>
  {
    touched && error ?
    <Text>{error}</Text>
    : null
  }
</View>

我刚刚将由reducex-form字段提供的brl props / function传递给TextInput字段的onBlur函数（由react-native提供），并且每件事情都正常工作。

Redux Form 6.1.1 - 模糊验证不适用于react-native

1 个答案: