Я использую TextInput React Native. Я заметил, что enableReturnKeyAutomatically отключает клавишу возврата на клавиатуре до тех пор, пока не будет введен какой-либо текст. Есть ли способ самостоятельно контролировать отключенное состояние клавиши возврата?
включить/отключить тип ключа возврата в реакции родной
Ответы (2)
Что вы могли бы сделать, так это реализовать собственное логическое логическое значение, которое вы бы подключили к enablesReturnKeyAutomatically
. В зависимости от его состояния вы можете управлять самой настройкой:
render = () => {
let bool = //... some custom logic
return (
<TextInput some="values" enablesReturnKeyAutomatically={bool} />
)
}
надеюсь, это поможет
enablesReturnKeyAutomatically
. Насколько я знаю, вы не можете контролировать поведение
- person Gianfranco P.; 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
, но это может также сработать, чтобы отключить его напрямую.