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

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

尝试将 Navigator 的 renderScene 回调更改为以下（基于Navigator 文档），因为稍后您将需要导航器对象。

renderScene={(route, navigator) => this.renderScene(route, navigator)}

然后，使用 'navigator' 而不是 'this' 来获取 refs。

navigator.refs.SecondInput.focus()

Answer 3

对于使用useRef 挂钩的functional 组件。您可以使用...轻松实现此目的...

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

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

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