React Native: Jak wybrać następny TextInput po naciśnięciu przycisku klawiatury „next”?

Zdefiniowałem dwa pola TextInput w następujący sposób:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

Ale po naciśnięciu przycisku „Dalej” na klawiaturze moja reagująca aplikacja nie przeskakuje do drugiego pola TextInput. Jak mogę to osiągnąć?

Dzięki!

Ustaw drugą TextInputostrość, gdy poprzednia TextInput„s onSubmitEditingjest wyzwalany.

Spróbuj tego

1. Dodanie odwołania do drugiego TextInput
   ref={(input) => { this.secondTextInput = input; }}

2. Powiąż funkcję fokusa z pierwszym zdarzeniem onSubmitEditing TextInput .
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Pamiętaj, aby ustawić blurOnSubmit na false, aby zapobiec migotaniu klawiatury.
   blurOnSubmit={false}

Po zakończeniu wszystko powinno wyglądać tak.

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

Możesz to zrobić bez użycia referencji . Takie podejście jest preferowane, ponieważ referencje mogą prowadzić do kruchego kodu . Dokumenty React zalecają znalezienie innych rozwiązań tam, gdzie to możliwe:

Jeśli nie zaprogramowałeś kilku aplikacji za pomocą React, twoją pierwszą skłonnością będzie zazwyczaj próba użycia referencji, aby „sprawić, że coś się stanie” w Twojej aplikacji. Jeśli tak jest, poświęć chwilę i zastanów się bardziej krytycznie, gdzie stan powinien być własnością w hierarchii komponentów. Często staje się jasne, że właściwe miejsce do „posiadania” tego stanu znajduje się na wyższym poziomie w hierarchii. Umieszczenie tam stanu często eliminuje chęć użycia referencji, aby „sprawić, że coś się stanie” - zamiast tego przepływ danych zwykle osiągnie twój cel.

Zamiast tego użyjemy zmiennej stanu do skupienia drugiego pola wejściowego.

1. Dodaj zmienną stanu, którą przekażemy jako rekwizyt do DescriptionInput:

   initialState() {
     return {
       focusDescriptionInput: false,
     };
   }

2. Zdefiniuj metodę modułu obsługi, która ustawi tę zmienną stanu na true:

   handleTitleInputSubmit() {
     this.setState(focusDescriptionInput: true);
   }

3. Po przesłaniu / naciśnięciu enter / next na TitleInput, zadzwonimy handleTitleInputSubmit. To ustawi się focusDescriptionInputna true.

   <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title" 
      onSubmitEditing={this.handleTitleInputSubmit}
   />

4. DescriptionInput„s focusprop jest ustawiona na naszej focusDescriptionInputzmiennej stanu. Tak więc, gdy focusDescriptionInputzmiany (w kroku 3) DescriptionInputzostaną ponownie renderowane za pomocą focus={true}.

   <TextInput
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" 
      focus={this.state.focusDescriptionInput}
   />

Jest to dobry sposób na uniknięcie używania referencji, ponieważ referencje mogą prowadzić do bardziej delikatnego kodu :)

EDYCJA: h / t do @LaneRettig za wskazanie, że musisz owinąć React Native TextInput kilkoma dodanymi rekwizytami i metodami, aby uzyskać odpowiedź na focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

Począwszy od wersji React Native 0.36, wywoływanie focus()(jak sugerowano w kilku innych odpowiedziach) w węźle wprowadzania tekstu nie jest już obsługiwane. Zamiast tego możesz użyć TextInputStatemodułu z React Native. Stworzyłem następujący moduł pomocniczy, aby to ułatwić:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

Możesz wtedy wywołać focusTextInputfunkcję w dowolnym „ref” z TextInput. Na przykład:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

Utworzyłem małą bibliotekę, która to robi, nie wymaga zmiany kodu poza zastąpieniem widoku opakowania i importem TextInput:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autofocus

Szczegółowo wyjaśniono tutaj: https://zach.codes/autofocus-inputs-in-react-native/

Myślałem, że podzielę się moim rozwiązaniem za pomocą komponentu funkcyjnego ... „ to ” nie jest potrzebne!

Reaguj 16.12.0 i React Native 0.61.5

Oto przykład mojego komponentu:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

Nie wiem, mam nadzieję, że to komuś pomoże =)

Używając Reaktywny natywny 0.45.1 Napotkałem również problemy przy ustawianiu ostrości na hasło TextInput po naciśnięciu klawisza Return na nazwie użytkownika TextInput.

Po wypróbowaniu większości najwyżej ocenianych rozwiązań tutaj na SO znalazłem rozwiązanie na github, które spełniło moje potrzeby: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Podsumowując:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

A potem używam tego w ten sposób:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}

Dla mnie na RN 0.50.3 jest to możliwe w ten sposób:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

Musisz zobaczyć this.PasswordInputRef. _root .focus ()

Jeśli używasz tak tcomb-form-nativejak ja, możesz to zrobić. Oto sztuczka: zamiast ustawiać rekwizyty TextInputbezpośrednio, robisz to za pośrednictwem options. Możesz odnieść się do pól formularza jako:

this.refs.form.getComponent('password').refs.input.focus()

Tak więc produkt końcowy wygląda mniej więcej tak:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(Podziękowania dla remcoanker za opublikowanie pomysłu tutaj: https://github.com/gcanti/tcomb-form-native/issues/96 )

Tak to osiągnąłem. W poniższym przykładzie wykorzystano interfejs API React.createRef () wprowadzony w React 16.3.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

Myślę, że to ci pomoże.

Mój scenariusz to <CustomBoladonesTextInput /> zawijanie RN <TextInput /> .

Rozwiązałem ten problem w następujący sposób:

Mój formularz wygląda następująco:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

W definicji komponentu CustomBoladonesTextInput przekazuję refField do wewnętrznego rekwizytu ref:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

I voila. Wszystko wróci do normy. Mam nadzieję że to pomoże

Wypróbuj to rozwiązanie w przypadku problemów z GitHub React Native.

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

Musisz użyć prop prop dla komponentu TextInput.
Następnie potrzebujesz utworzyć funkcję, która zostanie wywołana na prop onSubmitEditing, który przenosi fokus na drugie odwołanie TextInput.

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});

Używanie odwołań zwrotnych zamiast odwołań do starszego ciągu:

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>

<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

I dodaj metodę onSubmitEditing={() => this.focusTextInput(this.refs.password)}jak poniżej:

private focusTextInput(node: any) {
    node.focus();
}

Aby zaakceptowane rozwiązanie działało, jeśli TextInputznajdujesz się w innym składniku, musisz „pop” referencję z refkontenera nadrzędnego.

// MyComponent
render() {
    <View>
        <TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
    </View>
}

// MyView
render() {
    <MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
    <MyComponent onRef={(r) => this.myField2 = r}/>
}

w twoim komponencie:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

Uwaga: Użyłem, ._rootponieważ jest to odwołanie do TextInput w danych wejściowych NativeBase'Library '

i podczas wprowadzania tekstu w ten sposób

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

i dodaj metodę

focusNextField(nextField) {
    this.refs[nextField].focus();
}

Istnieje sposób na przechwytywanie kart w pliku TextInput. Jest zuchwały, ale lepszy niż nic .

Zdefiniuj onChangeTextmoduł obsługi, który porównuje nową wartość wejściową ze starą, sprawdzając, czy \t. Jeśli zostanie znaleziony, przesuń pole, jak pokazano na @boredgames

Zakładając, że zmienna usernamezawiera wartość nazwy użytkownika i setUsernamewywołuje akcję zmieniającą ją w sklepie (stan komponentu, magazyn redux itp.), Wykonaj coś takiego:

function tabGuard (newValue, oldValue, callback, nextCallback) {
  if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
    callback(oldValue)
    nextCallback()
  } else {
    callback(newValue)
  }
}

class LoginScene {
  focusNextField = (nextField) => {
    this.refs[nextField].focus()
  }

  focusOnPassword = () => {
    this.focusNextField('password')
  }

  handleUsernameChange = (newValue) => {
    const { username } = this.props            // or from wherever
    const { setUsername } = this.props.actions // or from wherever

    tabGuard(newValue, username, setUsername, this.focusOnPassword)
  }

  render () {
    const { username } = this.props

    return (
      <TextInput ref='username'
                 placeholder='Username'
                 autoCapitalize='none'
                 autoCorrect={false}
                 autoFocus
                 keyboardType='email-address'
                 onChangeText={handleUsernameChange}
                 blurOnSubmit={false}
                 onSubmitEditing={focusOnPassword}
                 value={username} />
    )
  }
}

Tutaj odczynnik dla składnika wejściowego, który ma właściwość: focus.

Pole będzie skupione tak długo, jak długo ten rekwizyt będzie ustawiony na true i nie będzie się skupiać tak długo, jak będzie to fałszywe.

Niestety ten komponent musi mieć zdefiniowane: ref, nie mogłem znaleźć innego sposobu na wywołanie .focus (). Cieszę się z sugestii.

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

Jeśli używasz NativeBase jako składników interfejsu użytkownika, możesz użyć tej próbki

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>