浏览下一个文本输入无效

时间:2018-12-12 09:10:19

标签: javascript react-native

我想将焦点传递给按下按钮时的下一个文本输入。一切正常,直到我在另一个类中创建了customTextInput并通过props调用它为止。但是现在的问题是焦点并没有改变按钮的按下,我认为与某个范围问题有关。也许它未访问其他类(子组件)的。 以下是我所做的事情:

  

这是我在其他js文件中创建的自定义文本输入

    <View>
      <CustomTextInput
      textLogo={logo}
      placeholder={placeholder}
      value={value}
      onChangeText={onTextChange}
      isMultiline={isMultiline}
      onFocus={() =>
     {
        this.setState({index:index,isFocused:true})
        this.refs.scrollView.scrollTo({ x: 0, y: position, animated: true })}
      }
      ref={input =>(this[arrTextInput[index]] = input)}/>
   </View>
  

这是用于更改焦点的功能

  customFocusNavigator = () => {
  return(
  <View style={styles.FocusNavigator}>
  <TouchableOpacity onPress={() => {this[arrTextInput[this.state.index - 1]].focus()}} style={styles.bottomSubView}>
    <Text>Previous</Text>
  </TouchableOpacity>
  <TouchableOpacity  onPress={() =>{this[arrTextInput[this.state.index + 1]].focus()}} style={styles.bottomSubView}>
    <Text>Next</Text>
  </TouchableOpacity>
</View>
)
}

我正在更改focus上的textInput索引。 希望我能为我的问题做足够的事情。任何帮助将不胜感激。谢谢

1 个答案:

答案 0 :(得分:0)

您不需要更改焦点的功能,只需使用 onSubmitEditing

例如,使用3个输入,您可以这样做:

<Input
  placeHolder="Input1"
  ref={input => (this.Input1 = input)}
  onSubmitEditing={() => {this.Input2.focus(); }}
/>
<Input
  placeHolder="Input2"
  ref={input => (this.Input2 = input)}
  onSubmitEditing={() => {this.Input3.focus(); }}
/>
<Input
  placeHolder="Input3"
  ref={input => (this.Input3 = input)}
  onSubmitEditing={() => **GO SOMEWHERE ELSE** }}
/>

您在以后的输入中设置 ref ,然后在前一个输入中传递 focus()