Поля ввода делают икоты (нативная базовая и избыточная форма) - PullRequest
Новая
       23

Поля ввода делают икоты (нативная базовая и избыточная форма)

0 голосов
/ 02 июля 2019

недавно я обновил свое реагирующее нативное приложение до

"native-base": "^ 2.12.1",

"реагировать-нативный": "0,59,9",

"Редукс-форма": "^ 8.1.0",

Но мои поля ввода текста делают ошибки, если я пишу на них слишком быстро, не все символы пишутся внутри полей. Мне нужно печатать очень медленно, чтобы все символы были написаны.

Что я делаю не так? 

import React from 'react';
import { reduxForm, Field } from 'redux-form';
import { Image, ImageBackground } from 'react-native';
import Proptypes from 'prop-types';
import moment from 'moment';
import { Button, Container, Content, Form, View } from 'native-base';
...
<Form style={styles.form}>    
  <Field    
     component={TextInputWithLabel}    
     autoCapitalize={'none'}    
     name="email"    
     keyboardType="email-address"    
     label="Email"    
     style={styles.input}        
  />    
  <Field    
     component={TextInputWithLabel}    
     autoCapitalize={'none'}    
     name="password"    
     secureTextEntry    
     label="Password"    
     last    
     transparent    
     style={styles.input}    
  />    
</Form>

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

import { Input, Item, Label, Toast, View } from 'native-base';
import Proptypes from 'prop-types';

import { Text } from '../../components/Text';

const TextInputWithLabel = (props) => {
  const {
    label,
    handleChange,
    suffix,
    input,
    labelStyle,
    meta: { active, touched, error },
    ...restProps
  } = props;

  const combinedStyles =
    props.style && typeof props.style === 'object'
      ? Object.assign({}, styles.text, props.style)
      : styles.text;

  function _handleBlur() {
    // if there is a handleChange function, call it onBlur
    if (handleChange) handleChange();

    if (error) {
      Toast.show({
        text: error,
        position: 'bottom',
        buttonText: 'close',
        type: 'danger',
        duration: 3000,
      });
    }

    // call the redux-form onBlur
    props.input.onBlur();
  }

  return (
    <View style={styles.wrapperView}>
      <Item floatingLabel style={styles.item}>
        <Label style={labelStyle || styles.label}>{label || ''}</Label>
        <Input
          {...input}
          style={combinedStyles}
          {...restProps}
          onBlur={_handleBlur}
        />

        {touched &&
          error &&
          !_.isEmpty(props.input.value) && (
            <Text style={styles.errorText}>{error}</Text>
          )}
      </Item>

      {suffix && (
        <View style={styles.suffix}>
          <Text style={styles.suffixText}>{suffix}</Text>
        </View>
      )}
    </View>
  );
};
...