React Native: Як вибрати наступний TextInput після натискання кнопки "next" на клавіатурі?


202

Я визначив два поля TextInput наступним чином:

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

Але після натискання кнопки «наступний» на моїй клавіатурі мій рідний додаток не реагує на перехід до другого поля TextInput. Як я можу цього досягти?

Дякую!


Відповідь Мітча (наразі третя вниз) працює для мене на v0.42.
Lawrence

Для людей, які перебувають на React v16.8.0або вище, я рекомендую відповідь, яку надав @Eli Johnson у нижній частині. React втратив чимало можливостей, пропонованих refу рішеннях нижче.
thedeg123

Відповіді:


333

Встановіть другий TextInputфокус, коли попередній TextInput«s onSubmitEditingспрацьовує.

Спробуйте це

  1. Додавання Ref до другого TextInput
    ref={(input) => { this.secondTextInput = input; }}

  2. Прив’яжіть функцію фокусування до першого події TextInput onSubmitEditing.
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. Не забудьте встановити blurOnSubmit на значення false, щоб запобігти мерехтінню клавіатури.
    blurOnSubmit={false}

Коли все готово, це має виглядати так.

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

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

53
Варто зазначити, що onSubmitEditingзворотний виклик викликається після blurподії. Тож клавіатура може зійти з розуму, якщо негайно зосередитись на наступному елементі. Тому може бути корисно встановити blurOnSubmit={false}всі елементи у формі, але залишити trueна останньому елементі, щоб дозволити кнопку " Готово" розмити останній ввід.
e1dar

9
Це більше не працює, ніж v0.36. Немає методу "фокусування" на компоненті. Як нам це робити зараз?
Мітч

4
@Mitch чудово працює на 0.40.0. Можливо, ви були помилкою у версії, яку ви працювали.
vikki

3
Використання RN 0,49, додавання blurOnSubmit={false}для запобігання мерехтіння клавіатури призвело до того, що це перестало працювати, будь-хто, хто знає, що відбувається?
nabil london

13
Для тих, хто не зміг зробити focusроботу, переконайтеся, що ви не використовуєте обгортку для TextInputкомпонента. Якщо у вас є CustomTextInputкомпонент say, який завершує роботу TextInput, вам потрібно застосувати TextInputметоди розмиття та фокусування для цього компонента, щоб він працював, як очікувалося.
Cihad Turhan

65

Це можна зробити без використання реф . Такий підхід є кращим, оскільки посилання можуть призвести до крихкого коду . Документи React радять знайти інші рішення, де це можливо:

Якщо ви не запрограмували декілька додатків за допомогою React, ваш перший схил, як правило, намагатиметься використовувати рефлекси, щоб "зробити все" у вашому додатку. Якщо це так, знайдіть мить і критичніше подумайте про те, де має належати держава в ієрархії компонентів. Часто стає зрозумілим, що належне місце для "володіння" цим станом знаходиться на більш високому рівні в ієрархії. Якщо розмістити стан там, часто виключається будь-яке бажання використовувати рефлекси, щоб "зробити щось" - натомість потік даних зазвичай досягне вашої мети.

Замість цього ми будемо використовувати змінну стану для фокусування другого поля введення.

  1. Додайте змінну стану, яку ми передамо як опору для DescriptionInput:

    initialState() {
      return {
        focusDescriptionInput: false,
      };
    }
  2. Визначте метод обробника, який встановить цю змінну стану на істинне:

    handleTitleInputSubmit() {
      this.setState(focusDescriptionInput: true);
    }
  3. Після подання / натискання клавіші "вхід / наступний" TitleInputми зателефонуємо handleTitleInputSubmit. Це встановить focusDescriptionInputтак.

    <TextInput 
       style = {styles.titleInput}
       returnKeyType = {"next"}
       autoFocus = {true}
       placeholder = "Title" 
       onSubmitEditing={this.handleTitleInputSubmit}
    />
  4. DescriptionInput«S focusпроп встановлюються в нашому focusDescriptionInputзмінне стані. Отже, коли focusDescriptionInputзміни (на кроці 3), DescriptionInputповторно відображатиметься з focus={true}.

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

Це хороший спосіб уникнути використання посилань, оскільки посилання можуть призвести до більш крихкого коду :)

EDIT: h / t до @LaneRettig, щоб вказати, що вам потрібно обгорнути React Native TextInput деякими доданими реквізитами та методами, щоб змусити його реагувати на focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

2
@LaneRettig Ви абсолютно праві - дякую, що вказали на це. Ми обробляємо RN TextInput деякими доданими реквізитами та методами. Будь ласка, дивіться нижню частину відповіді з цими доповненнями та повідомте мені, чи є у вас додаткові проблеми!
Stedman Blake

4
Класно. Ви повинні подати це як PR до РН. Я здивований, що це вже не підтримується поза коробкою.
Lane Rettig

8
що робити, якщо натиснути наступний на клавіатурі, а потім натиснути безпосередньо на першому вході? фокус повертається на друге, що поганий досвід з цим рішенням
Пьотр

3
Мені не подобається це рішення, тим більше, що воно не відповідає масштабам навіть для трохи довших форм 5-6 елементів, де вам знадобиться булевий фокус у стані для кожного елемента та керувати ним усім відповідно.
davidgoli

9
Цікаво, що в документах також зазначено: "Є кілька корисних випадків використання реф.: Керування фокусом, підбором тексту або відтворенням медіа ..." Отже, у цьому випадку використання refs для фокусування введення тексту було б коректним використанням цього інструменту .
Ной Аллен

26

Станом на React Native 0.36, виклик focus()(як це пропонується у кількох інших відповідях) на вузол введення тексту вже не підтримується. Натомість ви можете використовувати TextInputStateмодуль від React Native. Я створив наступний допоміжний модуль, щоб полегшити це:

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

Тоді ви можете викликати focusTextInputфункцію на будь-якому "ref" а TextInput. Наприклад:

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

1
Працює приголомшливо, але якщо хтось використовує форму редуксу, слід зробити щось подібне. <Field ... onSubmitEditing={() => focusTextInput(this._password)} />і ref має бути таким<Field ... withRef refName={e => this._password = e}/>
tarkanlar

1
Мені довелося використовувати "onSubmitEditing", щоб зробити цю роботу, але все-таки чудовим рішенням.
Адам Джекіела

3
Чудово працює в 0,42.
Лоуренс

1
@tarkanlar чи можете ви поділитися фрагментом коду для рішення? Я, здається, не можу зосередитись, коли використовує поле "Редукс", використовуючи лише TextInput, добре
Jasan

2
calling focus() on a text input node isn't supported any more=> жирна претензія, джерело? Виклик focus()працює відмінно з v0.49.5 + TextInputStateне задокументовані в той час як focus()і blur()згадуються: facebook.github.io/react-native/releases/next/docs / ...
tanguy_k

21

Я створив невелику бібліотеку, яка робить це, не потрібно змінювати код, окрім заміни перегляду обгортки та імпорту 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

Детально пояснили тут: https://zach.codes/autofocus-inputs-in-react-native/


Відмінна модель для досягнення цього результату. Має бути найкращою відповіддю з точки зору простоти використання. Схоже, я можу легко редагувати свій власний FormInput (розширення TextInput), щоб все ще працювати з вашими вводами форми. Майте на увазі, якщо я включу його у вашу відповідь, якщо для подальшого прикладу?
Джек Робсон

Звичайно! Я знаю ... Я опублікував це в іншій популярній публікації з цього приводу, але потрапив у проблеми з дублікатами. Просто намагаюся допомогти, бо я знаю, наскільки дратує ця проблема !!
zackify

Це чудово, якщо у вас є група TextInputs відразу один за одним, але якщо ви хочете додати стилізацію між ними, вона руйнується. Дякуємо за внесок.
GenericJam

Не соромтесь коригувати код. Я впевнений, що ви могли б зробити так, щоб пропустити елементи, які не є текстовими вводами. Не слід бути занадто важким для цього.
zackify

1
Це не створюється для виробництва RN@0.47.2
Філ Ендрюс

18

Думав, що я поділюсь своїм рішенням за допомогою функціонального компонента ... " це " не потрібно!

Реагуйте 16.12.0 та React Native 0.61.5

Ось приклад мого компонента:

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

Не знаю, сподіваюся, що це комусь допоможе =)


1
не працює. undefined не є об'єктом оцінки _this2.ref_input2.current, будь ласка, допоможіть
DEEP ADHIYA

Чи можете ви надати більш повний приклад коду?
Елі Джонсон

2
можливо, краще використовувати UseRef у функціональному компоненті, ніж createRef
lee

@hyuklee Ви справді правильний пане, я оновив ... дякую за голову! Ура!
Елі Джонсон

Для тих, хто любить бути в курсі останніх оновлень реагування, це ВІДПОВІДЬ.
Йохен

13

Використовуючи рідну реакцію 0.45.1, я також зіткнувся з проблемами, намагаючись встановити фокус на паролі TextInput після натискання клавіші повернення на ім'я користувача TextInput.

Спробувавши більшість найпопулярніших рішень тут на SO, я знайшов рішення на github, яке задовольнило мої потреби: https://github.com/shoutem/ui/isissue/44#issuecomment-290724642

Підсумовуючи це:

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

І тоді я використовую це так:

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

Ти врятуєш мені життя
:)

1
Ви просто перейменовані refна inputRef... Ви можете скинути весь свій спеціальний компонент, і ваш другий блок коду буде працювати так само, доки ви повернетесь до використанняref
Джейсон Толлівер,

9

Для мене на RN 0.50.3 це можливо таким чином:

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

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

Ви повинні побачити це.PasswordInputRef. _root .focus ()


1
Це специфічно для "рідної бази"
Developia

8

Якщо ви користуєтесь tcomb-form-nativeтакою, якою я є, ви також можете це зробити. Ось трюк: замість того, щоб встановлювати реквізит TextInputбезпосередньо, ви робите це через options. Ви можете посилатися на поля форми як:

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

Отже, кінцевий продукт виглядає приблизно так:

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

(Заслуга респондеру за розміщення ідеї тут: https://github.com/gcanti/tcomb-form-native/isissue/96 )


як мені викликати функцію onSubmitEditing? для напр .: Я хочу викликати функцію login (), коли користувач натискає зворотний ключ останнього textinput "зроблено".
четан

7

Це те, як я цього досяг. А в наведеному нижче прикладі використовується API React.createRef (), введений в 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>
    );
  }
}

Я думаю, що це вам допоможе.


яка мета .струму?
Адам Кац

5

Мій сценарій - <CustomBoladonesTextInput /> загортання RN <TextInput /> .

Я вирішив це питання наступним чином:

Моя форма виглядає так:

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

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

У компонентному визначенні компонента CustomBoladonesTextInput я передаю refField до внутрішнього опорного листа таким чином:

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

І вуаля. Все повертається знову. Сподіваюся, це допомагає


4

Спробуйте це рішення щодо проблем GitHub React Native.

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

Вам потрібно використати додаткову підтримку для компонента TextInput.
Тоді вам потрібно створити функцію, яка викликається на підтримці onSubmitEditing, яка переміщує фокус на другу посилання 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>
        );
    }
});

Будь ласка, включіть у відповідь відносну інформацію за посиланням.
Уес Фостер

Майте на увазі, що рядкові рефлекси можуть застаріти, тому це рішення може не працювати в майбутньому: "... Хоча строкові посилання не застаріли, вони вважаються застарілими і, ймовірно, будуть застаріли в якийсь момент у майбутньому. кращий ". - facebook.github.io/react/docs/more-about-refs.html
юра

1
Це більше не працює, ніж v0.36. Немає методу "фокусування" на компоненті. Як нам це робити зараз? Чи можете ви оновити відповідь?
Мітч

@Mitch не впевнений, повернеться це на 0.39.2, але це працює нормально.
Eldelshell

4

Використання refs зворотного дзвінка замість застарілих рядків refs:

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

1
Не працює, оскільки метод фокусування був видалений з TextInput.
Яків Лауріцен

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

І додайте метод onSubmitEditing={() => this.focusTextInput(this.refs.password)}як нижче:

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

2

Щоб прийняте рішення працювало, якщо ви TextInputзнаходитесь в іншому компоненті, вам потрібно буде "поп" посилання з refбатьківського контейнера.

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

1
Привіт @Eldelshell, я хотів би досягти того ж, але не міг би розібратися у вашому зразку, чи не хотіли б ви нам підказати?
Seeliang

Я думаю, це має бути правильною відповіддю. Я стежу за цим, і це працює.
Девід Чеун

це обидва в одному файлі?
MoralCode

2

у вашому компоненті:

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

Примітка. Я використовував, ._rootтому що це посилання на TextInput у Input NativeBase'Library '

а також у ваших текстових введеннях

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


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

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

і додати метод

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

Дуже акуратний підхід.
Siraj Alam

1
Стара відповідь, але хтось знає, чи можна отримати доступ до всіх запитів, як у цій відповіді, у функціональному (без стану) компоненті?
Дуглас Шмідт

1

Існує спосіб захоплення вкладок у TextInput. Це хакі, але краще, ніж нічого .

Визначте onChangeTextобробник, який порівнює нове вхідне значення зі старим, перевіряючи наявність a \t. Якщо такий знайдений, перейдіть до поля, як показано на @boredgames

Якщо припустимо, що змінна usernameмістить значення для імені користувача та setUsernameвідправляє дію, щоб змінити його в магазині (стан компонента, магазин редукцій тощо), зробіть щось подібне:

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

Це не спрацювало для мене за допомогою фізичної клавіатури. подія onChangeText не спрацьовує на вкладці.
Буфке

0

Тут реактивне рішення для вхідного компонента, який має: властивість фокусування.

Поле буде зосередженим до тих пір, поки ця опора встановлена ​​на істину та не буде фокусуватись, доки це неправда.

На жаль, цей компонент повинен мати: ref визначений, я не міг знайти іншого способу викликати .focus () на ньому. Я радий пропозиціям.

(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


@Bap - це Clojurescript. Реагент є зв'язуючим з React. Якщо вам цікаво, це прекрасна відповідність для React, якщо ви готові до того, що вам належить, оскільки оновлення стану, як правило, можливі лише за таких речей, як явний дзвінок swap!на atomтип. Згідно з документами, це використовується для прив'язки до React: "Будь-який компонент, який використовує атом, автоматично відтворюється, коли його значення змінюється." reagent-project.github.io
Del

0

Якщо ви використовуєте NativeBase як компоненти інтерфейсу, ви можете використовувати цей зразок

<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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.