React Native: Как выбрать следующий TextInput после нажатия кнопки «Далее» на клавиатуре?

203

Я определил два поля TextInput следующим образом:

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

Но после нажатия кнопки «Далее» на моей клавиатуре мое приложение, реагирующее на натив, не перепрыгивает во второе поле TextInput. Как я могу этого достичь?

Спасибо!

andreaswienes
источник
Ответ Митча (в настоящее время третий вниз) работает для меня на v0.42.
Lawrence
Для людей с React v16.8.0или выше я бы порекомендовал ответ, предоставленный @Eli Johnson, в нижней части. React устарел во многих случаях использования refв решениях ниже.
thedeg123

Ответы:

333

Установите второй TextInputфокус, когда предыдущий TextInput«s onSubmitEditingсрабатывает.

Попробуй это

  1. Добавление ссылки на второй TextInput
    ref={(input) => { this.secondTextInput = input; }}

  2. Привязать функцию фокуса к первому событию TextSput 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"
/>
boredgames
источник
53
Стоит отметить, что onSubmitEditingобратный вызов вызывается после blurсобытия. Таким образом, клавиатура может сойти с ума, если сразу сфокусироваться на следующем элементе. Поэтому может быть полезно установить blurOnSubmit={false}все элементы в форме, но оставить trueна последнем элементе, чтобы кнопка « Готово» размыла последний ввод.
e1dar
9
Это больше не работает, начиная с v0.36. Не существует метода «фокус» на компоненте. Как мы должны сделать это сейчас?
Митч
4
@Mitch отлично работает на 0.40.0. Возможно, это была ошибка в версии, которую вы использовали.
Викки
3
Использование RN 0.49, добавление blurOnSubmit={false}для предотвращения мерцания клавиатуры привело к тому, что это перестало работать, любой, кто знает, что происходит?
Набил Лондон
13
Для тех, кто не смог сделать focusработу, убедитесь, что вы не используете оболочку для TextInputкомпонента. Если у вас есть CustomTextInputкомпонент say, который переносится TextInput, вам нужно реализовать TextInputметоды размытия и фокусировки для этого компонента, чтобы он работал как положено.
Джихад Турхан
65

Вы можете сделать это без использования ссылок . Этот подход предпочтителен, поскольку ссылки могут привести к хрупкому коду . Документы React рекомендуют находить другие решения, где это возможно:

Если вы не запрограммировали несколько приложений с помощью React, ваша первая склонность будет заключаться в том, чтобы попытаться использовать ссылки, чтобы «сделать вещи» в вашем приложении. Если это так, уделите немного времени и подумайте о том, где должно находиться государство в иерархии компонентов. Часто становится ясно, что надлежащее место для «владения» этим состоянием находится на более высоком уровне в иерархии. Размещение этого состояния часто устраняет любое желание использовать ссылки, чтобы «заставить вещи происходить» - вместо этого поток данных обычно выполняет вашу цель.

Вместо этого мы будем использовать переменную состояния, чтобы сфокусировать второе поле ввода.

  1. Добавьте переменную состояния, которую мы передадим в качестве опоры DescriptionInput:

    initialState() {
      return {
        focusDescriptionInput: false,
      };
    }
  2. Определите метод-обработчик, который установит для этой переменной состояния значение true:

    handleTitleInputSubmit() {
      this.setState(focusDescriptionInput: true);
    }
  3. После отправки / нажатия Enter / Next на TitleInputмы позвоним handleTitleInputSubmit. Это установит focusDescriptionInputв истину.

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

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

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

РЕДАКТИРОВАТЬ: 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 некоторыми добавленными опорами и методами - пожалуйста, посмотрите нижнюю часть ответа с этими дополнениями и дайте мне знать, если у вас возникнут какие-либо проблемы!
Стедман Блейк
4
Прохладно. Вы должны представить это как пиар в RN. Я удивлен, что это не поддерживается из коробки.
Лейн Реттиг
8
Что если вы нажмете «Далее» на клавиатуре, а затем нажмете непосредственно на первый ввод? фокус возвращается ко второму, что является плохим опытом с этим решением
Петр
3
Мне не нравится это решение, в частности, потому что оно плохо масштабируется даже для немного более длинных форм из 5-6 элементов, где вам понадобится логическое состояние фокуса для каждого элемента и управление ими всеми соответственно.
Давидголи
9
Интересно, что в документах также говорится: «Есть несколько хороших вариантов использования ссылок: Управление фокусом, выделением текста или воспроизведением мультимедиа ...» Таким образом, в этом случае использование ссылок для фокусировки ввода текста будет правильным использованием инструмента. ,
Ноа Аллен
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» из a TextInput. Например:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...
Митч
источник
1
Работает потрясающе, но если кто-то использует приставку, следует сделать что-то вроде этого. <Field ... onSubmitEditing={() => focusTextInput(this._password)} />и ссылка должна быть такой<Field ... withRef refName={e => this._password = e}/>
tarkanlar
1
Мне пришлось использовать onSubmitEditing, чтобы сделать эту работу, но тем не менее отличное решение.
Адам Jakiela
3
Прекрасно работает в 0.42.
Lawrence
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/

zackify
источник
Отличная модель для достижения этого результата. Должен быть лучший ответ с точки зрения простоты использования. Похоже, я могу легко отредактировать свой пользовательский FormInput (расширения TextInput), чтобы по-прежнему работать с вашими вводами формы. Не возражаете, если я включу его в ваш ответ, если для дальнейшего примера?
Джек Робсон
Конечно! Я знаю ... Я разместил это в другом популярном сообщении об этом, но попал в беду за дубликаты Просто пытаюсь помочь, потому что я знаю, как раздражает эта проблема!
zackify
Это замечательно, если у вас есть куча TextInputs сразу после друг друга, но если вы хотите добавить стили между ними, это сломается. Спасибо за вклад, хотя.
GenericJam
Не стесняйтесь корректировать код. Я уверен, что вы могли бы сделать способ пропустить элементы, которые не являются текстовыми вводами. Не должно быть слишком сложно сделать.
zackify
1
Это не для производства RN@0.47.2
Фил Эндрюс
18

Думал, что поделюсь своим решением, используя функциональный компонент ... « это » не нужно!

Реагировать 16.12.0 и Реагировать 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
Хек Ли
@hyuklee Вы действительно правы, сэр, я обновил ... спасибо за заголовки! Ура!
Эли Джонсон
Для тех, кто любит не отставать от последних обновлений, это ОТВЕТ.
Йохен
13

При использованииact-native 0.45.1 я также столкнулся с проблемами при попытке установить фокус на пароле TextInput после нажатия клавиши возврата на имени пользователя TextInput.

Попробовав большинство решений с самым высоким рейтингом здесь, на SO, я нашел решение на github, которое удовлетворяло мои потребности: https://github.com/shoutem/ui/issues/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>
        )
    }
}
Kuhr
источник
Ты спас мне жизнь
:)
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 ()

Wishmaster
источник
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>
    );
  },
});

(Благодарим Remcoanker за публикацию идеи здесь: https://github.com/gcanti/tcomb-form-native/issues/96 )

Лейн Реттиг
источник
как вызвать функцию onSubmitEditing? например: я хочу вызвать функцию login (), когда пользователь нажимает последний возвращаемый тип ввода текста textinput 'done'.
Четан
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>
    );
  }
}

Я думаю, что это поможет вам.

Джанака Пушпакумара
источник
Какова цель .current?
Адам Кац
5

Мой сценарий <CustomBoladonesTextInput />, заключающий в себе RN <TextInput /> .

Я решил эту проблему следующим образом:

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

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

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

В определении компонента CustomBoladonesTextInput я передаю refField во внутреннюю опору ref следующим образом:

   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

Вам необходимо использовать ref prop для компонента 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>
        );
    }
});
APAquino
источник
Пожалуйста, включите относительную информацию по ссылке в вашем ответе.
Уэс Фостер
Имейте в виду, что ссылки на строки могут устареть, поэтому это решение может не работать в будущем: "... Хотя ссылки на строки не устарели, они считаются устаревшими и, скорее всего, в какой-то момент будут устаревшими. Ссылки обратного вызова являются предпочтительный «. - facebook.github.io/react/docs/more-about-refs.html
Юра
1
Это больше не работает, начиная с v0.36. Не существует метода «фокус» на компоненте. Как мы должны сделать это сейчас? Вы можете обновить ответ?
Митч
@ Митч не уверен, вернется ли он на 0.39.2, но теперь он работает нормально.
Eldelshell
4

Использование ссылок обратного вызова вместо устаревшей ссылки:

<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}
/>
fagerbua
источник
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();
}
Nisar
источник
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}/>
}
Eldelshell
источник
1
Привет @Eldelshell, я хотел бы добиться того же, но не мог разобраться с твоим образцом, не могли бы вы показать намек?
Силианг
Я думаю, что это должен быть правильный ответ. Я следую за этим, и это работает.
Дэвид Чунг
они оба в одном файле?
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 в NativeBase'Library 'Input

и в ваших текстовых входах, как это

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


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>
amorenew
источник
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();
}
Салони Парих
источник
Очень аккуратный подход.
Сирадж Алам
1
Старый ответ, но кто-нибудь знает, возможно ли получить доступ ко всем ссылкам, как в этом ответе, в функциональном (не имеющем состояния) компоненте?
Дуглас Шмидт
1

Есть способ захвата вкладок в TextInput. Хакерство, но лучше, чем ничего .

Определите onChangeTextобработчик, который сравнивает новое входное значение со старым, проверяя наличие\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} />
    )
  }
}
Marius
источник
Это не сработало для меня, используя физическую клавиатуру. событие onChangeText не срабатывает на вкладке.
Буфке
0

Здесь решение реагента для входного компонента, который имеет свойство: focus.

Поле будет сфокусировано до тех пор, пока этот реквизит установлен на true, и не будет фокусироваться, если это false.

К сожалению, для этого компонента необходимо определить: 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

Knotschi
источник
@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>
Мохамед Бен Хартуз
источник