自定义输入参考打字稿

Question

我想使用refs来设置focus()，以便使用键盘在输入之间进行导航。我的自定义组件就是这样：

import React, { createRef, RefObject } from 'react';

import { Platform, StyleSheet, ViewStyle, TextInput, View } from 'react-native';

import Metrics from 'themes/Metrics';
import Colors from 'themes/Colors';
import Fonts from 'themes/Fonts';

const styles = StyleSheet.create({
  ...
});

interface InputProps {
  type?: string;
  children?: React.ReactNode;
  disabled?: boolean;
  style?: ViewStyle;
  placeholder?: string;
  value: string;
  [x: string]: any;
}

class Input extends React.Component<InputProps> {
  static defaultProps = {
    autoCapitalize: 'none',
    placeholderTextColor: 'rgba(255, 255, 255, 0.5)',
    selectionColor: Colors.white,
    autoCorrect: false,
    underlineColorAndroid: Colors.transparent,
  };

  render() {
    const {
      children,
      disabled,
      style,
      placeholder,
      value,
      ...props
    } = this.props;
    return (
      <View style={styles.button}>
        <TextInput
          {...props}
          editable={!disabled}
          style={[styles.buttonText, style]}
        />
        {children}
      </View>
    );
  }
}

export default Input;

“注册”视图：

import React, { Fragment, RefObject, createRef } from 'react';
import { Text, View, StyleSheet, SafeAreaView, StatusBar } from 'react-native';

import { LinearGradient } from 'expo';

import RoundedButton from 'components/RoundedButton';

import Fonts from 'themes/Fonts';
import Input from 'components/Input';

import Colors from 'themes/Colors';
import Metrics from 'themes/Metrics';

const styles = StyleSheet.create({
  ...
});

const EmptyInitialState = {
  email: '',
  password: '',
  secretCode: '',
};

interface SignupScreen1State {
  email: string;
  password: string;
  secretCode: string;
}

class SignupScreen1 extends React.Component<{}, SignupScreen1State> {
  static navigationOptions = {
    headerStyle: {
      borderBottomWidth: 0,
      elevation: 0,
      backgroundColor: '#80C5EE',
    },
  };

  emailInput: RefObject<Input>;
  passwordInput: RefObject<Input>;
  secretCodeInput: RefObject<Input>;

  constructor(props: any) {
    super(props);
    this.state = EmptyInitialState;
    this.emailInput = createRef();
    this.passwordInput = createRef();
    this.secretCodeInput = createRef();
  }

  render() {
    const { email, password, secretCode } = this.state;

    return (
      <Fragment>
        <SafeAreaView style={{ flex: 0, backgroundColor: '#80C5EE' }} />
        <SafeAreaView style={{ flex: 1, backgroundColor: '#4894DC' }}>
          <StatusBar backgroundColor="#80C5EE" barStyle="light-content" />
          <LinearGradient
            colors={['#80C5EE', '#4894DC']}
            style={[styles.linearGradient]}
          >
            <View>
              <Text style={styles.title}>Bienvenue !</Text>
              <Text style={styles.subtitle}>Étape 1/2</Text>
              <Text style={styles.text}>
                Rejoins la communauté des joueurs de ton entreprise ! Ensemble,
                récoltez un maximum de Ki. À la fin du jeu, ils seront
                transformés en don pour une association.
              </Text>
            </View>
            <View style={{}}>
              <Text style={styles.inputTitle}>Code entreprise*</Text>
              <Input
                placeholder="Code entreprise"
                value={secretCode}
                onChangeText={() => {
                  this.setState({ secretCode });
                }}
                onSubmitEditing={() => {
                  this.emailInput.current.focus();
                }}
                returnKeyType="next"
              />

              <Text style={styles.inputTitle}>Ton e-mail*</Text>
              <Input
                placeholder="Email"
                value={email}
                onChangeText={() => {
                  this.setState({ email });
                }}
                onSubmitEditing={() => {
                  this.passwordInput.current.focus();
                }}
                ref={this.emailInput}
                returnKeyType="next"
              />

              <Text style={styles.inputTitle}>Ton mot de passe*</Text>
              <Input
                placeholder="Mot de passe"
                value={password}
                onChangeText={() => {
                  this.setState({ password });
                }}
                ref={this.passwordInput}
                returnKeyType="done"
              />

              <View style={{ width: Metrics.screenWidth }}>
                <RoundedButton onPress={() => this.handlePressSignup()}>
                  Inscription
                </RoundedButton>
              </View>
            </View>
          </LinearGradient>
        </SafeAreaView>
      </Fragment>
    );
  }
}

export default SignupScreen1;

但是我得到一个错误，提示我的输入组件未定义焦点。 Property 'focus' does not exist on type 'Input'.ts(2339)我猜我在处理引用的自定义组件中犯了错误。