焦点不会从 redux 形式的文本输入更改

Question

我有一个只有一个文本输入的表单，它是使用 redux-form 制作的。我正在检查 （！meta.active） 以显示验证消息，因为即使在从 TextInput 单击按钮时焦点也不会改变，meta.active 始终为真，并且验证消息不会显示。

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

Answer 1

也许您可能希望从<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>
  );
}