如何将焦点放在下一个点击反应本机？

Question

嗨，我想重点下一个输入字段（这是从父母扩展），而下一个（在Android键盘）被点击android键盘关闭，而不是聚焦下一个领域。

我尝试了一些像onSubmitEditing= this.refs.passwordFeald.focus()它不工作的代码，我感到如果有一个人解释这也是命名组件有点糊涂更好

下面是我当前的代码

export default class InputBox extends Component { 
    focusNextField = (nextField) => { this.refs[nextField].focus(); }; 

    render(){ 
     return(
      <TextInput 
       style = {style.input} 
       underlineColorAndroid='rgba(255,255,255,0.7)' 
       placeholderTextColor = "rgba(255,255,255,0.6)" 
       placeholder = {this.props.placeholder} 
       secureTextEntry={this.props.typePassword} 
       returnKeyType = {this.props.returnKeyType} 
       ref = {this.props.inputRef} 
       focusNextField = {() => this.focusNextField(this.props.onSubmitEditing)} 
      /> 
     ) 
    } 
} 

export default class Login extends Component { 

    render(){ 
    return(
     <View style={[styles.container, commonStyle.background]}> 
     <View style={[headerContStyle.topContainer]}> 
      <MainHeading/> 
     </View> 
     <View style={[formStyle.container]}> 
      <InputBox 
      placeholder = "Email or username" 
      returnKeyType = "next" 
      inputRef = {el => this.usenameFeald = el} 
      onSubmitEditing= 'passwordFeald' 
      /> 
      <InputBox 
      placeholder = "Password" 
      secureTextEntery = {"true"} 
      returnKeyType = "go" 
      inputRef = {el => this.passwordFeald = el} 
      typePassword = {true} 
      /> 
      <CommonButton 
       title = "Login" 
      /> 
      <CommonButton 
       title = "Sign Up" 
      /> 
      <ForgotPassword /> 
     </View> 
     </View> 
    ) 
    } 
} 

Answer 1

参考的关于TextInputhere的文件。

您可以看到示例集中在类BlurOnSubmitExample上的下一个TextInput。 在你的项目中，我建议你更改属性这样在第一个输入：

<InputBox 
    placeholder="Email or username" 
    returnKeyType="next" 
    onSubmitEditing={() => this.nextInput.focus()} 
/> 

，第二个：

<InputBox 
    placeholder="Password" 
    returnKeyType="next" 
    inputRef={(nextInput) => this.nextInput = nextInput} 
/> 

在的InputBox组件，我们送ref到父组件：

ref={(nextInput) => {this.props.inputRef && this.props.inputRef(nextInput)}} 
{ ...this.props } 

onSubmitEditing会在用户按回车键时调用，这样会集中第二个TextInput。