问React Native:如何在按下“下一步”键盘按钮后选择下一个TextInput？

EN

设置第二个

焦点，当上一个

%s

都被触发了。

试试这个

将引用添加到

第二个TextInput

将焦点函数绑定到

第一个TextInput

的onSubmitEditing事件。

记住将blurOnSubmit设置为false，以防止键盘闪烁。

当全部完成后，它应该看起来像这样。

{ this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

 { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

我想我会用一个函数组件来分享我的解决方案...‘

这个

“不需要！

React 16.12.0和React Native 0.61.5

下面是我的组件的一个示例：

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
       ref_input2.current.focus()}
      />
       ref_input3.current.focus()}
        ref={ref_input2}
      />
      
    
  )
}

你可以做到这一点

不使用refs

..。这种方法是首选的，因为引用可能导致

脆弱代码

..。The The The

React文档

建议在可能的情况下寻找其他解决方案：

如果你没有用React编写过几个应用程序，你的第一个倾向通常是尝试在你的应用程序中使用refs来“让事情发生”。如果是这样的话，花点时间仔细考虑一下状态应该在组件层次结构中的什么位置拥有。通常，很明显，“拥有”该状态的适当位置在层次结构中的较高级别。将状态放在那里通常会消除任何使用ref来“使事情发生”的愿望-相反，数据流通常会实现您的目标。

相反，我们将使用状态变量来关注第二个输入字段。

添加一个状态变量，我们将其作为道具传递给

：

initialState() { return { focusDescriptionInput: false，}；}

定义一个将此状态变量设置为true的处理程序方法：

handleTitleInputSubmit() { this.setState(focusDescriptionInput: true)；}

在提交/点击enter / next后，

，我们会打电话给

..。这将设置

是真的。

%s

prop设置为我们的

状态变量。所以，什么时候

更改(在步骤3中)，

将使用

..。

这是一个避免使用refs的好方法，因为refs会导致更脆弱的代码:)

EDIT: h/t to @LaneRettig，指出您需要使用一些附加的支持和方法来包装React Native TextInput，以使其响应

// Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }