React-Native文本输入中未定义refs

Question

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

我们正在尝试使用refs，在用户按下“下一个”按钮时从一个文本输入框转到另一个文本输入框，类似于经典的用户名和密码。

有没有人有什么想法？以下是我们正在使用的代码。从其他帖子上我在stack上找到了他们所做的事情；但是它告诉我们这个.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>
      );
  }

- wdlax11

---

只是尝试解决问题的一个方法：尝试在构造函数中绑定你的渲染场景函数。因此添加以下行：this.renderScene = this.renderScene.bind(this)。 - Alex Harrison

这个还没有成功。我试过在构造函数中绑定，也试过在renderScene={this.renderScene.bind(this)}中绑定。然后又试过只在构造函数中绑定。 - wdlax11

@AlexHarrison 我发现问题与renderScene有关。如果我移除导航栏并在原始的render中返回输入，它可以工作；但是，我需要导航栏。你有什么想法吗？ - wdlax11

Answer 1

尝试使用函数来设置参考。像这样：

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

你可以使用this.FirstInput来访问引用，而不是使用this.refs.FirstInput

- Nicolas Castellanos

---

如果您有键盘意识方面的经验，您是否可以看一下我的另一个问题 - https://dev59.com/ZVkS5IYBdhLWcg3wFi4M - wdlax11

Answer 2

对于使用 useRef hook 的功能性组件，你可以轻松地实现这一点，只需...

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

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

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

- iamcastelli

Answer 3

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

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

然后，使用“navigator”而不是“this”来获取引用。

navigator.refs.SecondInput.focus()

- max23_

---

我也尝试了一下，但没有成功 :/ - wdlax11

嗯，不确定，但是你修改了renderScene()函数以接收'route'和'navigator'对象吗？ - max23_