我定义了两个TextInput字段如下:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

但在按下键盘上的“next”按钮后,我的react-native应用程序并没有跳转到第二个TextInput字段。我怎样才能做到呢?

谢谢!


当前回答

对于RN 0.50.3的我来说,这是可能的:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

你必须看到这个。

其他回答

我的场景是< CustomBoladonesTextInput />包装一个RN < TextInput />。

我是这样解决这个问题的:

我的表单是这样的:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

在CustomBoladonesTextInput的组件定义中,我像这样将refField传递给内部的ref道具:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

瞧。一切恢复正常。 希望这能有所帮助

从React Native 0.36开始,不再支持在文本输入节点上调用focus()(在其他几个答案中建议)。相反,你可以使用React Native中的TextInputState模块。我创建了以下帮助模块,使这更容易:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

然后,您可以在TextInput的任何“ref”上调用focusTextInput函数。例如:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

如果你正在使用NativeBase作为UI组件,你可以使用这个示例

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>

设置第二个TextInput焦点,当前一个TextInput的onSubmitEditing被触发时。

试试这个

为第二个TextInput添加一个引用 Ref ={(input) => {this。secondTextInput =输入;}} 绑定焦点函数到第一个TextInput的onSubmitEditing事件。 onSubmitEditing={() => {this.secondTextInput.focus();}} 记住将blurOnSubmit设置为false,以防止键盘闪烁。 blurOnSubmit ={假}

当一切都完成后,它应该看起来像这样。

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

我就是这样做到的。下面的例子使用了React 16.3中引入的React. createref () API。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

我想这对你有帮助。