为什么不能在使用 Hooks 的 React Native 中清除 TextInput 的值？

Question

我试图在用户单击按钮时从 TextInput 中清除用户的值，但我无法获取它。

我正在使用 react-native 中的 Hooks 实现这个演示。

所以请帮助我，我是 react 的新手-native.Thank 你在高级。

 import React, { useState, useEffect } from 'react';
    import { StyleSheet, View, TextInput, TouchableOpacity, Text } from 'react-native';
    import { RFValue } from 'react-native-responsive-fontsize';
    import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
    const Login = ({ navigation }) => {
        const [name, setName] = useState('');
        const [password, setPassword] = useState('');
    
        /*   useEffect(() => {
              console.log("login screen");
               setName('');
              setPassword('');
              
      
          }); */
        function resetTextInput () {
            console.log("reset TextInput");
            setName(" ");
            setPassword(" ");
    
        }
        return (
            <View style={styles.mainContainer}>
                <Text style={styles.txtTitle}>Login</Text>
                <View style={{ marginTop: 80 }}>
                    <TextInput
                        placeholder={'Username'}
                        style={styles.txtInput}
                        onChangeText={(name) => { setName(name) }}
    
                    />
                    <TextInput
                        placeholder={'Password'}
                        style={styles.txtInput}
                        secureTextEntry={true}
                        onChangeText={(password) => { setPassword(password) }}
    
                    />
                </View>
                <TouchableOpacity style={styles.loginBtn} onPress={()=>{resetTextInput()}}>
                    <Text style={styles.loginBtnTxt}>Login</Text>
                </TouchableOpacity>
            </View>
        )
    }

Answer 1

重置值时用户空引号，

function resetTextInput () {
   console.log("reset TextInput");
   setName('');//changed this
   setPassword('');//changed this
}

并在 value prop.

中给出使用的各自状态

<TextInput
  placeholder={'Password'}
  style={styles.txtInput}
  secureTextEntry={true}
  onChangeText={(password) => { setPassword(password) }}
  value={password}
/>

第一个 TextInput 相同，

Answer 2

您可以设置空值：

function resetTextInput () {
console.log("reset TextInput");
setName(null);//changed this
setPassword(null);//changed this
}

主要是使用 TextInput 属性“值”设置状态值

<View style={{ marginTop: 80 }}>
                <TextInput
                    placeholder={'Username'}
                    style={styles.txtInput}
                    value={name} // set state to value prop
                    onChangeText={(name) => { setName(name) }}

                />
                <TextInput
                    placeholder={'Password'}
                    style={styles.txtInput}
                    secureTextEntry={true}
                    value={password} // set state to value prop
                    onChangeText={(password) => { setPassword(password) }}

                />
            </View>

这个解决方案可以帮到你。

为什么不能在使用 Hooks 的 React Native 中清除 TextInput 的值？

Why can't clear value from TextInput in react native using Hooks?

react-native

react-native-android

react-native-ios

react-native-textinput