通过下一个文本输入切换不起作用

Question

我想在按下按钮时将焦点传递给下一个文本输入。一切正常，直到我在另一个类中创建 customTextInput 并通过道具调用它。但现在的问题是焦点在按钮按下时没有改变，我认为它与某些范围问题有关。也许它没有访问其他类（子组件）的 this。 以下是我做过的事情：

这是我在其他 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>
)
}

我正在更改 textInput 上的索引 focus 。 我希望我为我的问题提供了足够的材料。任何帮助将不胜感激。谢谢

Answer 1

你不需要一个函数来改变焦点，你可以简单地使用 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()