Question

我正在使用 typescript 和react native，并且我不知道我是否正确定义了输入引用类型。

这是我代码的相关部分：（这两个组件都是我的自定义组件，<script> $(document).ready(function() { var payment_link='<?php echo $t ?>'; if (payment_link=='0') { $('#send').hide(); } else { $('#send').show(); } }); </script>不适用于react-native。）

<button id="send">SEND</button>

当我运行应用程序并按键盘上的下一步按钮时，它给我一个错误TextInput

我已经搜索并阅读了许多关于stackoverflow的答案，但是没有一个人没有解释它与打字稿一起工作的方式。

我也阅读了issue on github，看来我的代码与之非常相似，除了我使用的是打字稿，所以我认为// in begin of class private readonly passwordInputRef: React.RefObject<Password> = createRef(); // in render function <TextInput key={'login page username'} language={language} placeholder={'Username:'} value={username} containerStyle={styles.username} hasError={loginError} onChangeText={this.setUsername} returnKeyType={"next"} blurOnSubmit={false} onSubmitEditing={() => this.passwordInputRef.current!.focus()} /> <Password key={'login page password'} ref={this.passwordInputRef} language={language} placeholder={'Password:'} value={password} containerStyle={styles.password} hasError={loginError} onChangeText={this.setPassword}/>的define命令存在问题。

我做错了什么？

当前我正在使用：

_this.passwordInputRef.current.focus is not a function

Answer 1

我解决了我的问题。在Password组件类中，我定义了具有本地反应类型TextInput的ref对象，

// in begin of Password class
private readonly inputRef: React.RefObject<TextInput> = createRef();

，然后在render方法中将此引用对象设置为内部TextInput：

// other views
<TextInput
    {...this.props}
    ref={this.inputRef} <----
    key={'password value input'}
    secureTextEntry={hidePassword}
    />
// other views

并为类定义focus方法，如下所示：

public focus() {
  this.inputRef.current && this.inputRef.current.focus();
}

无需更改任何其他内容，它就可以完美运行。

如果我理解正确，则过程应如下所示：

自定义输入时，您需要自己处理焦点。
我问题中的代码，调用focus组件的Password方法
我必须将焦点转移到我的内部输入组件上

专注于下一个表单使用focus（）函数输入

1 个答案: