React Native Remove Autofill Space with State set 输入

Question

我运行遇到登录屏幕的问题，人们会自动填写他们的电子邮件，因此在屏幕末尾留下 space。我想澄清的是，当他们开始添加密码时，他们正在考虑做一个 onBlur 可能会使用 .trim() 或 .replace() 但是怎么做我将它与我的 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

您可以 trim 值和 setEmail 以及 onChangeText 中需要的任何检查

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

React Native Remove Autofill Space with State set 输入

React Native Remove Autofill Space with State set Input

trim

react-native

use-state