![](/img/trans.png)
[英]how to get TextInput value without using state in react native android
[英]Bug in react native textInput when using state on android
此錯誤僅存在於 Android 上。
如果我在 Android 上有一個 textInput 並將值等於 state。 然后在其他地方我更改了值,當我在 textInput 上使用 onChange 時,它使用舊文本值而不是新狀態。
這是我的零食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',
},
});
改用onChangeText
,
onChangeText={(text)=>{this.setState({text});}}
好的,我發現這是三星唯一的問題,與鍵盤緩存有關。 解決方法是在改變value狀態后keyboard.dismiss。
我也在 Moto 手機上看到了這一點。 我通過從 onKeyPress 而不是 onChangeText 更新狀態來處理它。 很煩人,因為您必須處理退格鍵,還因為它現在閃爍 - 輸入簡要顯示新的按鍵值,然后隱藏它,然后顯示由我的按鍵處理程序設置的新狀態。 (如this question所示)也許我忽略了一個更簡單的解決方案,但這是我的示例:
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 更改它以最大程度地減少閃爍:
isValidEmail(str) {
return !/[^a-z0-9.+@_-]+/g.test(str);
}
validateEmail({ nativeEvent: { key } }) {
console.log("key: " + key);
// don't update state here if key is valid:
if (key == "Enter" || key == "Backspace" || this.isValidEmail(key)) return;
// update state with corrected key:
value = (this.state.email || "").concat(key.replace(/[^a-z0-9.+@_-]+/ig, "").toLowerCase());
console.log("value: " + value);
this.setState({ email: value});
}
...
const Email = <Input
value={this.state.email}
onChangeText={(text) => { if (this.isValidEmail(text)) this.setState({email: text})}}
onKeyPress={this.validateEmail}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.