React Native Text Input Clear не очищает текст

Изменить: при дальнейшем осмотре кажется, что это происходит только в Android 6.0.1. Попробовав на нескольких устройствах с 6.0, это не было проблемой.

У меня есть очень простой фрагмент кода React Native, в котором я хочу очистить текст в TextInput. Это выглядит примерно так:

state = {
  v: ""
};

_changeText = v => {
  this.setState({ v });
};

clear = () => {
  this.textInputRef.clear();
}

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={this.clear}>
        <Text> Clear </Text>
      </TouchableOpacity>
      <TextInput
        ref={ref => this.textInputRef = ref}
        value={this.state.v}
        onChangeText={this._changeText}
      />

    </View>
  );
}

Теперь поведение, которое я ожидал, заключается в том, чтобы оставить поле ввода текста в фокусе и очистить текст. Вот что происходит - однако, как только я начинаю что-то печатать на клавиатуре, текст, который я ранее очистил, снова появляется в поле ввода текста. Очевидно, такая стойкость текста на самом деле нежелательна.

Кто-нибудь из вас когда-нибудь сталкивался с этой проблемой? Это ошибка RN или есть способ избежать такого поведения, не размывая клавиатуру?

Вот небольшой отрывок, чтобы прояснить, что я имею в виду: https://snack.expo.io/H1S9b5Mpe.

Если вы начнете печатать, нажмите «Очистить», а затем продолжите ввод, ранее показанный текст появится перед новым набранным текстом.


react-native react-native-android
person Zuzana Chlupackova    schedule 05.04.2017    source источник
comment
Вы пробовали очистить штат?   -  person Jagjot    schedule 05.04.2017
comment
Вы можете найти способ решения этой проблемы здесь: stackoverflow.com/questions/37798584/   -  person Filip P.    schedule 25.04.2017
comment
Обходной путь действительно работает. Это явно не идеально, но мы применяем его только для устройства, в котором есть проблема.   -  person Zuzana Chlupackova    schedule 13.06.2017
comment
Я использую Android 7.0, использую последнюю стабильную версию RN (0.49), и, по-видимому, это все еще проблема. Этот обходной путь - единственное, что у меня работает (установка автозамены на false не сработала, равно как и ручная установка состояния входного значения на null или пустую строку, хотя null и пустая строка по какой-то причине вели себя по-другому (все равно ни один из них не был правильно))   -  person Sir Neuman    schedule 26.10.2017

Ответы (5)


arrow_upward
6
arrow_downward

Я только что закончил с этим бороться! Это сильная боль!

Что я сделал, чтобы решить эту проблему (на данный момент), для свойства автозамены TextInput было установлено значение false, похоже, это не позволяет клавиатуре «поддерживать состояние»

<TextInput 
    autoCorrect={false} 
    ref={component => this.messageInput = component} 
    value={this.state.message} 
    onChangeText={(text) => this.setState({ message: text })}
    placeholder="Type your message here..." />

Я пробовал все остальное, и похоже, что это сработало. Надеемся на лучшее решение!

Кстати: вы также должны сделать this.setState({ message: "" }), чтобы значение на входе было сброшено на пустую строку.

person Ally Jr    schedule 14.08.2017
comment
У меня это работает! У меня болела голова, пока я не нашел это решение. Очень умный. Спасибо. - person Augusto Gonzalez; 07.04.2018

arrow_upward
1
arrow_downward

Я делаю этот код для очистки TextInput в React Native OnSubmitEditing, вы можете проверить мою закуску: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Вот код:

state = {
    searchInput:'',
    clearInput:false
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(searchInput)=>this.setState({
                    searchInput
                })}
                value={!this.state.clearInput ? this.state.searchInput : null}
                onSubmitEditing={()=>{
                    this.setState({
                        clearInput:!this.state.clearInput,
                    })
                }}
            />
        </View>
    )
}
person André Abboud    schedule 19.07.2018

arrow_upward
0
arrow_downward

Возможно, это связано с определенной версией RN или, как вы выяснили, с конкретной версией ОС. Фрагмент, который у вас есть, действительно работает нормально, не может воспроизвести эту проблему в 6.0.0.

Возможно, вместо того, чтобы использовать clear метод TextInput, вы можете попробовать другой способ очистки текста, например: this.setState({v: ""});. Это обеспечит синхронизацию состояния и не сохранит предыдущее значение.

person Artal    schedule 05.04.2017
comment
К сожалению, то же самое происходит и с setState. Кажется, это очень странная проблема, потому что мы можем воспроизвести ее только на некоторых устройствах, работающих под управлением 6.0.1. Мы также можем воспроизвести его на устройстве под управлением 7.0. - person Zuzana Chlupackova; 06.04.2017

arrow_upward
0
arrow_downward

Хорошо, это код только для очистки текста. Вы можете добавить свою логику, чтобы сохранить ее (например, в другой переменной состояния)

   state = {
    typedText:'',
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(typedText)=>this.setState({
                    typedText
                })}
                value={this.state.typedText ===" ? null : this.state.typedText}
                onSubmitEditing={()=>{
                    this.setState({
                        typedText:"",
                    })
                }}
            />
        </View>
    )
}
person 9patchcoder    schedule 16.10.2018

arrow_upward
-1
arrow_downward

Простой способ очистить после отправки:

<TextInput
    autoCorrect={false}
    style={styles.form}
    value = {this.state.text}
    placeholder={this.props.p_text}
    onChangeText={this.handleChangeText}
    onSubmitEditing={this.handleSubmitEdit}
</TextInput>

и в this.handleSubmitEdit выполните свою логику, которую вы хотите сделать, и добавьте эту строку

handleSubmitEdit = () => {
    // do your  code
    this.setState({ text: ''});
}

Это удалит текст в компоненте

person Anant0810    schedule 15.07.2020