React-native:将重点放在自定义组件上构建的数组

Question

我正在尝试根据数组创建自定义输入的列表，在按Enter键时，我希望将重点自动移至下一个自定义输入。我可以使用ref和onSubmitEditing与常规<TextInput> React组件一起使用，但是我无法使用包装<TextInput>

的自定义组件才能正常运行。

这是我的代码，它由两个文件组成： App.js和 TextInput2.js(我知道目前的最后一行会因为参考计数器而出错，但是如果我能使它工作，我会解决最后一期(p>工作小吃

- 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>
            )
        }
    }

我已经阅读了这篇文章，但似乎无法确定如何设置该函数以将重点放在下一个字段上。

Answer 1

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

我认为您使它变得复杂。尝试这样改变，

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

CustomTextComponent component

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

当您使用createref((时，您必须使用"当前"对象称其为ref。

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>
        )
    }
}