React-Native: установка фокуса на пользовательский компонент, построенный из массива - PullRequest
Новая
       20

React-Native: установка фокуса на пользовательский компонент, построенный из массива

1 голос
/ 02 июля 2019

Я пытаюсь создать список пользовательских входов на основе массива, и при нажатии клавиши ввода я бы хотел, чтобы фокус автоматически перешел к следующему пользовательскому вводу. Я могу заставить это работать с обычным <TextInput> реагирующим компонентом, используя ref и onSubmitEditing, но я не могу заставить это работать должным образом, используя мой пользовательский компонент, который упаковывает <TextInput>

Вот мой код, он состоит из двух файлов: App.js и TextInput2.js (я знаю, что в настоящее время в последней строке будет ошибка из-за счетчика ссылок, но если я смогу заставить его работать, я обращусь к последнему выпуск)

Рабочая закуска

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

Я прочитал этот пост и этот , но не могу определить, как настроить функцию для установки фокуса на следующее поле.

1 Ответ

1 голос
/ 05 июля 2019

Я редактировал Снэк.Пожалуйста, попробуйте это

Я думаю, вы усложняете.Попробуйте изменить следующим образом: 

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

CustomTextComponent компонент 

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