Redux Form 6.1.1 - проверка размытия не работает на 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;
}

Примечание. Я заметил, что из touch && error условие ошибки содержит необходимое сообщение об ошибке, но нажатие остается ложным даже после переключения / фокуса на другое поле ввода. Как только я нажал кнопку отправки, для флажка было установлено значение true.


react-native reactjs react-native-android redux-form
person manish keer    schedule 03.11.2016    source источник
comment
У меня такая же проблема с реакцией. Ваш обходной путь размытия не сработал для меня, хотя   -  person Juan Solano    schedule 30.05.2017
comment
Было бы полезно, если бы вы могли поделиться фрагментом кода.   -  person manish keer    schedule 30.05.2017

Ответы (1)


arrow_upward
3
arrow_downward

Я нашел обходной путь для этого, но все же, если они лучше, обновите.

ниже мой обновленный код (с рабочим событием размытия).

Обновленный компонент текстового поля

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>

Я просто передал реквизиты / функцию onBlur, предоставляемую полем redux-form, в функцию onBlur поля TextInput (предоставленную response-native), и все работает правильно.

person manish keer    schedule 04.11.2016