включить/отключить тип ключа возврата в реакции родной

Я использую TextInput React Native. Я заметил, что enableReturnKeyAutomatically отключает клавишу возврата на клавиатуре до тех пор, пока не будет введен какой-либо текст. Есть ли способ самостоятельно контролировать отключенное состояние клавиши возврата?


person Sun_Josh    schedule 17.04.2017    source источник


Ответы (2)


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

render = () => {
    let bool = //... some custom logic
    return (
        <TextInput some="values" enablesReturnKeyAutomatically={bool} />
    )
}

надеюсь, это поможет

person Deniz Saner    schedule 17.04.2017
comment
это не работает, как вы упомянули. логика включения или отключения кнопки не контролируется реквизитом enablesReturnKeyAutomatically. Насколько я знаю, вы не можете контролировать поведение - person Gianfranco P.; 10.01.2018
comment
Обратите внимание, что мой ответ от апреля. Я думаю, что API изменился. - person Deniz Saner; 10.01.2018

Да :-)

Передайте реквизит disabled в кнопку "Отправить".
Создайте метод в своем компоненте, скажем, isDisabled, который возвращает либо true, либо false.
Теперь в "Кнопке отправки" передайте disabled={this.isDisabled()}.
Это ( значение true или false) определяет, включена или отключена ваша клавиша возврата/выполнения/перехода/следующего/поиска/отправки.. (отправить).

Вот ссылка из документации по реакции: disabled prop on Button component.
Примечание. в документации это не является очевидным, но этот реквизит также доступен в TouchableOpacity и связанных компонентах.

disabled: Если true, отключите все взаимодействия для этого компонента. ТИП: bool ТРЕБУЕТСЯ: Нет

Вот урезанный пример MVE непосредственно из одного из моих собственных приложений:
canSubmit() — это имя функции, которая включает/выключает кнопку отправки):

import React from 'react';
import { View, Text, TouchableOpacity, TextInput} from 'react-native';

class NewDeck extends React.Component {

  state = {
    title: '',
    beenTouched: false,
    errorMessage: '',
  }

  controlledTextInput(prevTitle){
    const isEmptyStringErrorMessage = this.isEmptyStringErrorMessage(title);

    this.setState({
      title,
      errorMessage,
      beenTouched: true,
    });
  }

  isEmptyStringErrorMessage(text){
    return (text.trim() === '')
            ? 'Cannot be an empty string.'
            : ''
  }

  canSubmit(){
    return (!this.state.errorMessage && this.state.beenTouched) &&
  }

  render() {
    return (
      <View>

          <TextInput 
              placeholder='Quiz Deck Title'
              value={this.state.title}
              returnKeyType={ "done" }
          />

          <TouchableOpacity
            onPress={ () => this.onSubmit()}
            disabled={!this.canSubmit()}
            >
            <Text>
              Submit
            </Text>
          </TouchableOpacity>

      </View>
    );
  }
}

Я не пробовал передавать это же свойство непосредственно в сам компонент TextInput, но это может также сработать, чтобы отключить его напрямую.

person SherylHohman    schedule 04.05.2018