React Native: Bagaimana memilih TextInput berikutnya setelah menekan tombol keyboard "next"?

Saya mendefinisikan dua bidang TextInput sebagai berikut:

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

Tetapi setelah menekan tombol "berikutnya" pada keyboard saya, aplikasi asli-reaksi saya tidak melompat ke bidang TextInput kedua. Bagaimana saya bisa mencapainya?

Terima kasih!

Set kedua TextInputfokus, ketika sebelumnya TextInput's onSubmitEditingdipicu.

Coba ini

1. Menambahkan Ref ke TextInput kedua
   ref={(input) => { this.secondTextInput = input; }}

2. Bind fungsi fokus untuk acara onSubmitEditing TextInput pertama .
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Ingatlah untuk mengatur blurOnSubmit ke false, untuk mencegah papan ketik berkedip-kedip.
   blurOnSubmit={false}

Ketika semua selesai, akan terlihat seperti ini.

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

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

Anda dapat melakukan ini tanpa menggunakan referensi . Pendekatan ini lebih disukai, karena referensi dapat menyebabkan kode rapuh . The Bereaksi docs menyarankan menemukan solusi lain jika mungkin:

Jika Anda belum memprogram beberapa aplikasi dengan Bereaksi, kecenderungan pertama Anda biasanya adalah mencoba menggunakan referensi untuk "mewujudkan sesuatu" di aplikasi Anda. Jika ini masalahnya, luangkan waktu sejenak dan pikirkan lebih kritis tentang di mana negara harus dimiliki dalam hierarki komponen. Seringkali, menjadi jelas bahwa tempat yang tepat untuk "memiliki" keadaan itu berada pada tingkat yang lebih tinggi dalam hierarki. Menempatkan keadaan di sana sering menghilangkan keinginan untuk menggunakan referensi untuk "mewujudkan sesuatu" - sebagai gantinya, aliran data biasanya akan mencapai tujuan Anda.

Sebagai gantinya, kami akan menggunakan variabel status untuk memfokuskan bidang input kedua.

1. Tambahkan variabel status yang akan kami sampaikan sebagai penyangga ke DescriptionInput:

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

2. Tetapkan metode handler yang akan mengatur variabel status ini menjadi true:

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

3. Setelah memasukkan / menekan enter / selanjutnya pada TitleInput, kami akan menelepon handleTitleInputSubmit. Ini akan focusDescriptionInputmenjadi true.

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

4. DescriptionInput's focusprop diatur untuk kami focusDescriptionInputvariabel negara. Jadi, ketika focusDescriptionInputperubahan (dalam langkah 3), DescriptionInputakan dirender ulang focus={true}.

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

Ini adalah cara yang bagus untuk menghindari penggunaan referensi, karena referensi dapat menyebabkan kode yang lebih rapuh :)

EDIT: h / t ke @LaneRettig untuk menunjukkan bahwa Anda harus membungkus React Native TextInput dengan beberapa alat peraga tambahan & metode untuk membuatnya merespons focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

Pada Bereaksi Asli 0,36, panggilan focus()(seperti yang disarankan dalam beberapa jawaban lain) pada simpul input teks tidak didukung lagi. Sebagai gantinya, Anda dapat menggunakan TextInputStatemodul dari React Native. Saya membuat modul pembantu berikut untuk mempermudah ini:

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

Anda dapat, kemudian, memanggil focusTextInputfungsi pada "ref" a TextInput. Sebagai contoh:

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

Saya membuat perpustakaan kecil yang melakukan ini, tidak diperlukan perubahan kode selain mengganti tampilan pembungkus Anda dan mengimpor 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

Dijelaskan secara terperinci di sini: https://zach.codes/autofocus-inputs-in-react-native/

Saya pikir saya akan membagikan solusi saya menggunakan komponen fungsi ... ' ini ' tidak diperlukan!

Bereaksi 16.12.0 dan Bereaksi Asli 0.61.5

Berikut adalah contoh komponen saya:

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

Saya tidak tahu, harap ini membantu seseorang =)

Menggunakan react-asli 0.45.1 Saya juga mengalami masalah mencoba mengatur fokus pada kata sandi TextInput setelah menekan tombol kembali pada nama pengguna TextInput.

Setelah mencoba sebagian besar solusi berperingkat teratas di SO, saya menemukan solusi pada github yang memenuhi kebutuhan saya: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Singkatnya:

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

Dan kemudian saya menggunakannya seperti ini:

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

Bagi saya di RN 0,50.3 itu mungkin dengan cara ini:

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

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

Anda harus melihat ini.PasswordInputRef. _root .fokus ()

Jika Anda menggunakan tcomb-form-nativeseperti saya, Anda dapat melakukan ini juga. Begini TextInputcaranya : alih-alih mengatur alat peraga secara langsung, Anda melakukannya melalui options. Anda bisa merujuk ke bidang formulir sebagai:

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

Jadi produk akhir terlihat seperti ini:

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

(Kredit untuk remcoanker untuk memposting ide di sini: https://github.com/gcanti/tcomb-form-native/issues/96 )

Inilah cara saya mencapainya. Dan contoh di bawah ini telah menggunakan API React.createRef () yang diperkenalkan di Bereaksi 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>
    );
  }
}

Saya pikir ini akan membantu Anda.

Skenario saya adalah <CustomBoladonesTextInput /> membungkus RN <TextInput /> .

Saya memecahkan masalah ini sebagai berikut:

Bentuk saya seperti:

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

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

Pada definisi komponen CustomBoladonesTextInput, saya meneruskan refField ke prop ref dalam seperti ini:

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

Dan voila. Semuanya kembali berfungsi lagi. Semoga ini membantu

Coba solusi ini pada masalah React Native's GitHub.

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

Anda perlu menggunakan penyangga ref untuk komponen TextInput.
Maka Anda perlu membuat fungsi yang dipanggil pada prop onSubmitEditing yang memindahkan fokus pada ref TextInput kedua.

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

Menggunakan referensi panggil balik alih-alih referensi string lama :

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

Dan tambahkan metode untuk onSubmitEditing={() => this.focusTextInput(this.refs.password)}seperti di bawah ini:

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

Agar solusi yang diterima berfungsi jika Anda TextInputberada di dalam komponen lain, Anda harus "memunculkan" referensi dari refke wadah induk.

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

dalam komponen Anda:

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

Catatan: Saya menggunakan ._rootkarena ini adalah referensi ke TextInput di NativeBase'Library 'Input

dan dalam input teks Anda seperti ini

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

dan tambahkan metode

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

Ada cara untuk menangkap tab di a TextInput. Rampok, tapi lebih baik daripada tidak sama sekali .

Tetapkan onChangeTexthandler yang membandingkan nilai input baru dengan yang lama, memeriksa a\t . Jika ditemukan, lanjutkan bidang seperti yang ditunjukkan oleh @boredgames

Dengan asumsi variabel usernameberisi nilai untuk nama pengguna dan setUsernamemengirimkan tindakan untuk mengubahnya di toko (status komponen, toko redux, dll), lakukan sesuatu seperti ini:

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

Di sini solusi reagen untuk komponen input yang memiliki: properti fokus.

Bidang akan difokuskan selama prop ini disetel ke true dan tidak akan memiliki fokus selama ini salah.

Sayangnya komponen ini perlu memiliki: ref didefinisikan, saya tidak dapat menemukan cara lain untuk memanggil .focus () di atasnya. Saya senang dengan saran.

(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

Jika Anda menggunakan NativeBase sebagai Komponen UI, Anda dapat menggunakan sampel ini

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