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

Posted 2023-04-18

【中文标题】React-Native：将焦点设置到由数组构建的自定义组件

【英文标题】：React-Native: Setting focus to custom component built off an array

【发布时间】：2019-11-13 10:47:39

【问题描述】：

我正在尝试基于数组创建自定义输入列表，当按下回车键时，我希望焦点自动移动到下一个自定义输入。我可以使用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，但似乎无法确定如何设置函数以将焦点设置在下一个字段上。

【参考方案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>
        )
    

【讨论】：

当我关注这个时，我得到以下信息：“Cannot read property 'focus' of undefined”

我相信我需要在自定义组件中定义一个focus() 方法，当我尝试您现在推荐的方法时，它不会出错但不会移动焦点。我应该将onSubmitEditing=() => this.myRef[i + 1].current.focus() 中的内容放入自定义组件的方法中吗？

非常感谢。这几天我一直在为此苦苦挣扎。一旦系统允许我将奖励赏金（说我目前必须等待 21 小时）