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

Question

我正在使用 redux-form 6.1.1 开发 react-native (Android)。

我注意到一个奇怪的行为，即当我从输入字段中删除焦点（模糊）时 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;
}

注意：我从touched && error condition error contains required error message 观察到但即使在 switch/focus 到另一个输入字段后 touched 仍然是 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>

我刚刚将 redux-form 字段提供的 onBlur props/function 传递给 TextInput 字段的 onBlur 函数（由 react-native 提供），一切正常。

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

Redux Form 6.1.1 - validation on blur is not working on react-native

reactjs

react-native

redux-form

react-native-android