首页 文章

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

提问于
浏览 次
2

我正在使用react-native（Android），我正在使用redux-form 6.1.1 .

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

请指导我 . 以下是我的代码 .

Text field component

<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>

Implementation of this Text field component as below

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

validate function

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

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

  return err;
}

Note ：我观察到 touched && error 条件错误包含所需的错误消息但触摸仍然为假，即使在切换/焦点到另一个输入字段后也是如此 . 一旦我点击提交按钮，触摸标志设置为true .

reactjs react-native redux-form react-native-android

1 回答

  • 2

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

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

    Updated Text field component

    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字段提供的Blur props / function传递给TextInput字段的onBlur函数（由react-native提供），并且每件事都正常工作 .

    回复于

相关问题