0

我一直在挖掘，我似乎无法找到一种合适的方法来关注表单中的下一个 TextInput。我正在使用 React Native 0.61.5 和 React 16.9.0 并使用 Typescript 模板设置项目。我在网上找到的大部分内容都使用早期版本的 React Native 或 React，我无法降级，因为这是一个公司项目，我们使用的版本取决于开发主管。

React Native 的文档https://facebook.github.io/react-native/docs/textinput#__docusaurus没有显示 TextInput 上存在的 .focus() 方法。有 onFocus，但它发生在 TextInput 获得焦点之后，它不能帮助我们在按下返回键后将焦点设置到屏幕上的特定 TextInput。

使用 refs 是一个不错的主意：

inputRef = React.createRef<'TextInput>(); //（<后面的逗号因为它一直隐藏代码）

将鼠标悬停在 inputRef 上的 Intellisense：（属性）LoginForm.inputRef：React.RefObject<'TextInput> //（< 后面的逗号，因为它一直隐藏代码）

我正在像这样使用这个参考：

this.inputRef?.current?.focus();

但我不断收到打字稿错误说：

类型“TextInput”上不存在属性“焦点”。

鉴于文档，这是有道理的，因为我在那里找不到它作为财产。

将鼠标悬停在 ref 属性上时 TextInput 的智能感知：（JSX 属性）React.ClassAttributes.ref?: string | ((实例：TextInput | null) => void) | React.RefObject | 空 | 不明确的

我希望能够点击 android/ios 虚拟键盘上的返回键并将焦点转移到下一个 TextInput 以便我可以提交表单。

4

2 回答 2

0

创建的对象React.createRef()具有以下形状

{ current: TextInput }

您可以通过执行以下操作访问文本输入元素：

inputRef.current.focus();
于 2020-02-22T16:35:12.860 回答
0 
<TextInput
    placeholder = "FirstTextInput"
    returnKeyType = { "next" }
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={input => { this.secondTextInput = input; }}
    placeholder = "secondTextInput"
/>
于 2020-02-22T16:35:39.590 回答