React Native: “Bir sonraki” klavye düğmesine bastıktan sonra sonraki TextInput nasıl seçilir?

İki TextInput alanını aşağıdaki gibi tanımladım:

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

Ancak klavyemdeki "sonraki" düğmesine bastıktan sonra, yerel tepki uygulamam ikinci TextInput alanına atlamıyor. Bunu nasıl başarabilirim?

Teşekkürler!

İkinci Set TextInputönceki odak, TextInput'ın onSubmitEditingtetiklenir.

Bunu dene

1. İkinci TextInput öğesine bir Ref ekleme
   ref={(input) => { this.secondTextInput = input; }}

2. Odak işlevini ilk TextInput öğesinin onSubmitEditing olayına bağlayın .
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Klavye titremesini önlemek için blurOnSubmit öğesini false olarak ayarlamayı unutmayın.
   blurOnSubmit={false}

Her şey bittiğinde, böyle görünmelidir.

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

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

Bunu refs kullanmadan yapabilirsiniz . Ref'ler kırılgan koda yol açabileceğinden bu yaklaşım tercih edilir . Docs Tepki mümkün olduğunda diğer çözümler bulma tavsiye:

React ile birkaç uygulama programlamadıysanız, ilk eğiminiz genellikle uygulamanızda "bir şeyler yapmak" için refs kullanmaya çalışmak olacaktır. Durum buysa, bir dakikanızı ayırın ve bileşen hiyerarşisinde devletin nerede olması gerektiği konusunda daha eleştirel düşünün. Çoğu zaman, bu duruma "sahip olmak" için uygun yerin hiyerarşide daha yüksek bir düzeyde olduğu anlaşılmaktadır. Durumu buraya yerleştirmek, çoğu zaman "işleri gerçekleştirmek" için refs kullanma arzusunu ortadan kaldırır - bunun yerine veri akışı genellikle hedefinize ulaşır.

Bunun yerine, ikinci giriş alanını odaklamak için bir durum değişkeni kullanacağız.

1. Prop olarak geçireceğimiz bir durum değişkeni ekleyin DescriptionInput:

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

2. Bu durum değişkenini true olarak ayarlayacak bir işleyici yöntemi tanımlayın:

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

3. Enter / next tuşuna basıp gönderdikten sonra TitleInputarayacağız handleTitleInputSubmit. Bu focusDescriptionInputdoğru olarak ayarlanır .

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

4. DescriptionInput's focusprop, focusDescriptionInputdurum değişkenimize ayarlandı . Böylece, focusDescriptionInputdeğişiklikler (3. adımda) DescriptionInputile yeniden oluşturulacaktır focus={true}.

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

Bu, refs kullanmaktan kaçınmanın güzel bir yoludur, çünkü refs daha kırılgan koda yol açabilir :)

DÜZENLEME: h / t to @LaneRettig, React Natif TextInput'u yanıt vermesini sağlamak için bazı eklenen sahne ve yöntemlerle sarmanız gerektiğini belirtmek için focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

React Native 0.36'dan itibaren, focus()bir metin giriş düğümünde (başka yanıtlarda önerildiği gibi) çağrı yapmak artık desteklenmemektedir. Bunun yerine, TextInputStateReact Native'den modülü kullanabilirsiniz . Bunu kolaylaştırmak için aşağıdaki yardımcı modülü oluşturdum:

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

Ardından, focusTextInputişlevi herhangi bir "ref" öğesinde çağırabilirsiniz TextInput. Örneğin:

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

Bunu yapan küçük bir kütüphane oluşturdum, kaydırma görünümünüzü değiştirmek ve TextInput'u içe aktarmak dışında kod değişikliği gerekmiyordu:

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

Burada ayrıntılı olarak açıklanmıştır: https://zach.codes/autofocus-inputs-in-react-native/

Çözümümü bir işlev bileşeni kullanarak paylaşacağımı düşündüm ... ' bu ' gerekli değil!

Tepki 16.12.0 ve Tepki Yerel 0.61.5

İşte benim bileşen bir örnek:

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

Bilmiyorum, umarım bu birine yardımcı olur =)

Reat-native 0.45.1 kullanarak TextInput kullanıcı adında dönüş tuşuna bastıktan sonra TextInput parolasına odaklanmaya çalışırken sorunla karşılaştım.

SO'daki en yüksek puan alan çözümlerin çoğunu denedikten sonra github'da ihtiyaçlarımı karşılayan bir çözüm buldum: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Özetlersek:

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

Ve sonra böyle kullanıyorum:

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

RN 0.50.3'te benim için bu şekilde mümkün:

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

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

Bunu görmelisiniz.PasswordInputRef. _kök .focus ()

tcomb-form-nativeBenim gibi kullanıyorsan bunu da yapabilirsin. İşte püf noktası:TextInput doğrudan bunu yoluyla options. Formun alanlarına şu şekilde başvurabilirsiniz:

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

Böylece nihai ürün şöyle görünür:

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

(Fikri buraya gönderdiği için remcoanker'a teşekkür ederiz: https://github.com/gcanti/tcomb-form-native/issues/96 )

Ben bunu başardım. Aşağıdaki örnek, React 16.3'te sunulan React.createRef () API'sini kullanmıştır.

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

Bunun size yardımcı olacağını düşünüyorum.

Benim senaryom <CustomBoladonesTextInput /> bir RN <TextInput /> kaydırma .

Bu sorunu şu şekilde çözdüm:

Formum şöyle görünüyor:

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

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

CustomBoladonesTextInput bileşen tanımında, refField'i şu gibi iç ref prop'a geçiriyorum:

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

Ve işte. Her şey geri dönüyor tekrar çalışıyor. Bu yardımcı olur umarım

React Native'ın GitHub sorunları için bu çözümü deneyin.

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

TextInput bileşeni için ref prop'ı kullanmanız gerekir.
Sonra odak ikinci TextInput ref üzerinde hareket onSubmitEditing prop üzerinde çağrılan bir işlev oluşturmanız gerekir.

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

Eski dize ref'leri yerine geri arama ref'lerini kullanma :

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

Ve onSubmitEditing={() => this.focusTextInput(this.refs.password)}aşağıdaki gibi bir yöntem ekleyin :

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

Kabul edilen çözümün, TextInputbaşka bir bileşenin içindeyken çalışması için , referansı refüst konteynere "pop" yapmanız gerekir .

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

bileşeninizde:

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

Not: NativeBase'Library 'Girişinde._root TextInput'a bir başvuru olduğu için kullandım

ve metin girişlerinizde bunun gibi

<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%', }} />

ve yöntem ekle

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

Yakalamak için bir yol yoktur sekmeleri bir yer TextInput. Keskin, ama hiç yoktan iyidir .

A onChangeTextgirişini kontrol ederek yeni giriş değerini eski ile karşılaştıran bir işleyici tanımlayın \t. Biri bulunursa, alanı @boredgames ile gösterildiği gibi ilerletin

Değişkenin usernamekullanıcı adının değerini içerdiğini ve setUsernamebunu mağazada değiştirmek için bir eylem gönderdiğini (bileşen durumu, redux mağazası, vb.) Varsayarsak, şöyle bir şey yapın:

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

Burada: focus özelliğine sahip bir giriş bileşeni için bir reaktif çözümü.

Alan, bu pervane true değerine ayarlandığı sürece odaklanacak ve yanlış olduğu sürece odaklanmayacaktır.

Ne yazık ki bu bileşen bir: ref tanımlanmış olması gerekir, ben üzerinde .focus () çağırmak için başka bir yol bulamadık. Öneriler için mutluyum.

(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

UI Bileşenleri olarak NativeBase kullanıyorsanız bu örneği kullanabilirsiniz

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