React Native Remove Autofill Space with State set Input

Question

我在登录屏幕上遇到了一个问题，人们会自动填写电子邮件，因此会在屏幕末尾留下一个空格。我想澄清的是，当他们移动到添加密码时，所以我想在Blur上做一个，可能会使用.trim((或.replacement((，但我如何将其用于我的setEmail useState？

屏幕打击：

const LoginScreen = ({ navigation }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const LogInUser = async() => {
if(email && password) {
try {
await auth.signInWithEmailAndPassword(email, password)
setEmail('')
setPassword('')
setError('')
navigation.replace('Home')
console.log('User Logged In = ');
} catch (err){
setError('Email or Password is wrong!');
console.log(err);
}
}
}
return (
<DismissKeyboard>     
<View style={styles.screenStyle}>
<View style={{ ...StyleSheet.absoluteFill }}>
<Image source={require('../../assets/images/AccountBG.png')} style={{ flex: 1, height: null, width: null}} />
</View>               
<StatusBar hidden={true} />
<View style={styles.loginBox}>
<Text style={[styles.whiteText, styles.headTextH1, styles.headingBufferBottom]}>Welcome</Text>
<Text style={styles.errorMessage}>{error}</Text>
<TextInput
style={styles.inputStyles}
placeholder="Email"
placeholderTextColor="#000"
value={email}
onChangeText={setEmail}
onBlur={cleanEmail}
/>
<TextInput
style={styles.inputStyles}
secureTextEntry
placeholder="Password"
placeholderTextColor="#000"
value={password}
onChangeText={setPassword}
/>
<OGButton title="Login" onPress={()=> LogInUser()} />
</View>
<View style={[styles.registerBox, styles.whiteText]}>
<Text style={styles.whiteText}>Don't have an account? | </Text>
<Text style={[styles.underlineText, styles.whiteText]} onPress={() => navigation.navigate('Register')} >Register Here</Text>
</View>
</View>
</DismissKeyboard>        
);
}

Answer 1

您可以在onChangeText 中修剪值并设置电子邮件和所需的任何检查

onChangeText={(val) => {
// have other checks if needed here
setEmail(val.trim())
}
}