Фокус не меняется с TextInput в избыточной форме - PullRequest
Новая
       174

Фокус не меняется с TextInput в избыточной форме

0 голосов
/ 18 января 2019

У меня есть форма только с одним TextInput, который сделан с использованием redux-формы.Я проверяю (! Meta.active), чтобы показать сообщение проверки, поскольку фокус не меняется даже при нажатии кнопки из TextInput, meta.active всегда имеет значение true, а сообщение проверки не отображается.

export default function MTTextInput(props) {
    const { input, label, meta, ...inputProps } = props; 
    var hasError = false; 
    if (meta.error !== undefined &&  meta.touched && !meta.active) {
        hasError = true;
    }
    return (
        <Item fixedLabel error={hasError} ><Label>{label}</Label>
            <Input
                {...inputProps}
                onChangeText={input.onChange}
                onBlur={input.onBlur}
                onFocus={input.onFocus}
                value={input.value}
            />
            {hasError ? <Text>{meta.error}</Text> : <Text />}
        </Item>
    );
}

MTTextInput.propTypes = {
    input: PropTypes.shape({
        onBlur: PropTypes.func.isRequired,
        onChange: PropTypes.func.isRequired,
        onFocus: PropTypes.func.isRequired,
        value: PropTypes.any.isRequired
    }).isRequired,
    meta: PropTypes.shape({
        active: PropTypes.bool.isRequired,
        error: PropTypes.string,
        invalid: PropTypes.bool.isRequired,
        pristine: PropTypes.bool.isRequired,
        visited: PropTypes.bool.isRequired
    }).isRequired
};

1 Ответ

0 голосов
/ 18 января 2019

Возможно, вы захотите переключиться с компонента <Input/> на компонент <TextInput/>. Вот общий пример, который вы можете найти здесь : 

import React from 'react';
import { TextInput, View, Text } from 'react-native';

/**
 * to be wrapped with redux-form Field component
 */
export default function MyTextInput(props) {
  const { input, meta, ...inputProps } = props;

  const formStates = ['active', 'autofilled', 'asyncValidating', 'dirty', 'invalid', 'pristine',
    'submitting', 'touched', 'valid', 'visited'];

  return (
    <View>
      <TextInput
        {...inputProps}
        onChangeText={input.onChange}
        onBlur={input.onBlur}
        onFocus={input.onFocus}
        value={input.value}
      />
      <Text>The { input.name} input is:</Text>
      {
        formStates.filter((state) => meta[state]).map((state) => {
          return <Text key={state}> - { state }</Text>;
        })
      }
    </View>
  );
}
...