React-Native：将焦点设置到由数组构建的自定义组件

Question

我正在尝试基于数组创建自定义输入列表，当按下回车键时，我希望焦点自动移动到下一个自定义输入。我可以使用ref 和onSubmitEditing 使其与常规<TextInput> react 组件一起使用，但我无法使用包装<TextInput> 的自定义组件使其正常工作

这是我的代码，它由两个文件组成：App.js 和 TextInput2.js（我知道目前最后一行会因为引用计数器而出错，但如果我能让它工作，我会解决最后一行问题）

Working Snack

-- App.js--

    import React from 'react';
    import { StyleSheet, View, TextInput } from 'react-native';
    import  TextInput2 from './TextInput2'

    export default class App extends React.Component {
      constructor(){
        super();
        this.myRef = [];
        this.state = {}
      }

      focusField = (key) => {
        this.myRef[key].focus()    
      }

      render() {
        let textFields = ["one", "two", "three", "four", "five"];
        return (
          <View style={styles.container}>
            {
              textFields.map((x, i) => {
                this.myRef[i] = React.createRef();
                let k = i + 1 
                return(
                  <TextInput2 
                    name={x}
                    key={i}                
                    placeholder={x + " This Doesnt Work"}
                    ref={ref => this.myRef[i] = ref}
                    nextRef={this.myRef[k]}
                    //onSubmitEditing={() => this.focusField(k)}
                    //onSubmitEditing={() => this.myRef[k].focus()}
                    blurOnSubmit={false}         
                  />
                )
              })
            }
            {

              textFields.map((x, i) => {
                this.myRef[i] = React.createRef(); 
                return(
                  <TextInput 
                    name={x}
                    key={i}
                    placeholder="This works!"
                    ref={ref => this.myRef[i] = ref} 
                    onSubmitEditing={() => this.focusField(i+1)}
                    blurOnSubmit={false}         
                  />
                )
              })
            }
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },  
    });

--TextInput2.js--

    import React from 'react';
    import { View, TextInput } from 'react-native';

    export default class TextInput2 extends React.Component {
        state={}
        handleFocus = () => {}
        handleBlur = () => {}

        focus() {
            this.props.nextRef.focus()
        }   

        render() {
            return (
                <View >
                    <TextInput
                        {...this.props}                    
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                        onSubmitEditing={() => this.focus()}                                                                   
                    />                             
                </View>
            )
        }
    }

我已阅读 this post 和 this，但似乎无法确定如何设置函数以将焦点设置在下一个字段上。

Answer 1

我已经编辑了小吃。请尝试this

我认为你让事情变得复杂了。试着这样改变，

this.myRef[index] = React.createRef()

CustomTextComponent 组件

 <CustomTextComponent 
            name={Something}
            key={index}                
            forwardRef={this.myRef[index]}
            onSubmitEditing={() => this.myRef[index + 1].current.focus()}         
            />

当您使用 createRef() 时，您必须使用“当前”对象来调用它。

CustomComponent.js

import React from 'react';
import { View, TextInput } from 'react-native';

export default class CustomComponent extends React.Component {
    render() {
        return (
            <View >
                <TextInput
                    {...this.props}                    
                    returnKeyType={"next"}
                    ref={this.props.forwardRef}
                    onSubmitEditing={this.props.onSubmitEditing}                                                                   
                />                             
            </View>
        )
    }
}