Ошибка в реакции родного textInput при использовании состояния на Android - PullRequest
Новая
       21

Ошибка в реакции родного textInput при использовании состояния на Android

1 голос
/ 18 апреля 2019

Эта ошибка существует только на Android.

Если у меня есть textInput на Android и положить значение, равное состоянию.Затем в другом месте я меняю значение, когда я использую onChange для textInput, он использует старое текстовое значение, а не новое состояние.

Вот моя закуска https://snack.expo.io/SyV1mkIc4

А ниже весь код, показывающий, что он не работает 

    import * as React from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text:  'aaa'
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.text}
          onChange={(event) => this.setState({
      text: event.text,
    })}
        />
      <TouchableOpacity
        onPress={()=>this.setState({
      text: "",
    })}
        style={styles.submit}
      >
      </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  submit: {
    height: 200,
    width: 200,
    backgroundColor: 'blue',
    textAlign: 'center',
  },
});

Ответы [ 3 ]

1 голос
/ 18 апреля 2019

используйте onChangeText вместо 

onChangeText={(text)=>{this.setState({text});}}
0 голосов
/ 15 июля 2019

Я вижу это и на телефонах Moto.Я имел дело с этим путем обновления состояния из onKeyPress вместо onChangeText.Раздражает, потому что вам приходится обрабатывать клавишу возврата, а также потому, что теперь она мигает - ввод кратко отображает новое значение нажатия клавиши, затем скрывает его, а затем показывает новое состояние, установленное моим обработчиком нажатия клавиши.( Как видно в этом вопросе ) Может быть, я упустил более простое решение, но вот мой пример: 

validateEmail({ nativeEvent: { key } }) {
    if (key == "Enter") return;

    let value = (this.state.email || "");
    if (key == "Backspace") {
      value = value.substring(0, Math.max(0, value.length - 1));
    }
    else {
      value = value.concat(key.replace(/[^a-z0-9.+@_-]+/ig, "").toLowerCase());
    }
    this.setState({ email: value});
  }

...

 const Email = <Input
      value={this.state.email}
      onKeyPress={this.validateEmail}
    />

Итак, я делаю обходной путь, чтобы onchangetext обрабатывал допустимые нажатия клавиши заменяйте его на onkeypress только тогда, когда необходимо минимизировать мерцание:

0 голосов
/ 18 апреля 2019

Хорошо, я понял, что это проблема только samsung и имеет отношение к кешированию клавиатуры. Решением является клавиатура.dismiss после изменения состояния значения.

...