React-Native引用在文本输入上未定义

Question

我们目前正在运行React-Native 0.33

当我们点击下一个按钮时,我们正在尝试使用refs从1个文本输入到另一个文本输入.密码的经典用户名.

任何人都有任何想法？以下是我们使用的代码.从我在堆栈上发现的其他帖子中,这就是他们所做的; 但是,它告诉我们this.refs是未定义的.

更新 所以我把问题缩小到了

 render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}

          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

如果我只是在原始渲染中的renderScene函数中渲染下面的代码,它会起作用,但是使用导航器它将无法工作.有谁知道为什么？或者如何让导航器显示以及渲染renderScene中的代码以显示在原始渲染中？

   class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.state={
      username: '',
      password: '',
      myKey: '',
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}

          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
      <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput 
                            ref = "FirstInput"
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}
                            onSubmitEditing={(event) => {
                              this.refs.SecondInput.focus();
                            }}
                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            ref = "SecondInput"
                            style={styles.input}
                            placeholder="Password"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            returnKeyType="done"
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            focus={this.state.focusPassword}
                            >
                        </TextInput>
                      </View>
                </View>
      </View>
      );
  }

Answer 1

尝试使用函数设置参考.像这样:

<TextInput ref={(ref) => { this.FirstInput = ref; }} />

然后您可以使用this.FirstInput而不是this.refs.FirstInput 来访问引用

Answer 2

对于functional使用useRef钩子的组件。您可以轻松地实现这一点，通过...

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

function MyTextInput(){
  const textInputRef = useRef<TextInput>(null);;

  return (
    <TextInput ref={textInputRef}  />
  )
}