尝试更改 Formik 中的 onChange 时无法输入

Question

我正在尝试在 react-native 中使用 Formik 从用户输入中获取数据，但是当使用像

这样的函数时

const handleInput = (e) => {
      e.preventDefault()
        getUserInfo(e);
    };

并通过

onChangeText={handleInput}

显示e.preventDefault() not a function 当我删除它时，我什至无法输入，这是发生了什么

这是代码

function LoginScreen({navigation}) {
    // set timeout ID for setTimeOut()
    // const timeIdRef = React.useRef(null);
    // const dispatch = useDispatch();
    const [userInfo, getUserInfo] = useState('');

    const handleInput = (e) => {
        e.preventDefault();
        getUserInfo(e);
    };

    // mock user from fake api
    // useEffect(() => {
    //  dispatch(getUser());
    // }, [dispatch]);

    // const user = useSelector((state) => {
    //  return state.User.user;
    // });
    // useEffect(() => {
    //  return () => {
    //      if (timeIdRef.current) {
    //          // make sure this is always cleared in case clearTo is never called
    //          clearTimeout(timeIdRef.current);
    //      }
    //  };
    // }, [timeIdRef]);
    // console.log();

    // const Login = useSelector((state) => {
    //  return state.LoginAction.loginStatus;
    // });
    // function handleLogin() {
    //  dispatch({type: 'changeLogin'});
    // }
    // function handlDefault() {
    //  dispatch({type: 'getDefault'});
    // }

    // console.log(user);
    // function SetTimer() {
    //  handleLogin();
    //  if (timeIdRef.current) {
    //      // clear any previous timeIdRef to avoid multiple button click activate multiple setTimeout
    //      clearTimeout(timeIdRef.current);
    //  }
    //  const timeID = setTimeout(() => {
    //      navigation.navigate('Home');
    //  }, 3000);
    //  timeIdRef.current = timeID;
    // }

    // function clearTO() {
    //  clearTimeout(timeIdRef.current);
    //  timeIdRef.current = null;
    //  handlDefault();
    // }
    // function getTextStyle(isValid) {
    //  if (isValid) {
    //      return {
    //          color: 'black',
    //      };
    //  }

    //  return {
    //      color: 'grey',
    //  };
    // }

    const loginValidationSchema = Yup.object().shape({
        email: Yup.string().email('Please enter valid email').required('Email Address is Required'),
        password: Yup.string()
            .min(8, ({min}) => `Password must be at least ${min} characters`)
            .required('Password is required'),
    });
    return (
        <View style={styles.ViewStyle}>
            <Text style={{fontSize: 40}}>Login To System</Text>
            {/* <TextInput value={userInfo} onChange={handleGetUser} /> */}

            <Formik
                validateOnMount
                validationSchema={loginValidationSchema}
                initialValues={{email: '', password: ''}}
                onSubmit={SetTimer}
            // () => navigation.navigate('Login')
            >
                {({handleChange, handleBlur, handleSubmit, values, errors, touched, isValid}) => (
                    <View>
                        <TextInput
                            name="email"
                            value={userInfo}
                            placeholder="Email Address"
                            style={styles.TextInputForm}
                            onChangeText={handleInput}
                            onBlur={handleBlur('email')}
                            value={values.email}
                            keyboardType="email-address"
                        />
                        {errors.email && touched.email && <Text style={styles.errorText}>{errors.email}</Text>}
                        <TextInput
                            name="password"
                            placeholder="Password"
                            onChangeText={handleChange('password')}
                            onBlur={handleBlur('password')}
                            value={values.password}
                            secureTextEntry
                            style={styles.TextInputForm}
                        />
                        {errors.password && touched.password && (
                            <Text style={styles.errorText}>{errors.password}</Text>
                        )}

                        <TouchableOpacity
                            onPress={handleSubmit}
                            style={styles.ButtonLogin}
                            disabled={!isValid || values.email === ''}>
                            {/* <CirclesLoader size={20} dotRadius={7} /> */}
                            <Text style={getTextStyle(isValid)}>Login</Text>
                        </TouchableOpacity>
                        {/* <View>
                            <Modal transparent visible={Login}>
                                <View
                                    style={{
                                        backgroundColor: '#000000',
                                        flex: 1,
                                        justifyContent: 'center',
                                        alignContent: 'center',
                                    }}>
                                    <View style={styles.ModalStyle}>
                                        <CirclesLoader />
                                        <TextLoader
                                            textStyle={{
                                                fontSize: 25,
                                                marginTop: 20,
                                            }}
                                            text="Logging you in"
                                        />
                                        <TouchableOpacity onPress={clearTO} style={styles.ButtonBack}>
                                            <Text>Go back</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </Modal>
                        </View> */}
                    </View>
                )}
            </Formik>
        </View>
    );
}

// const styles = StyleSheet.create({
//  ViewStyle: {
//      alignItems: 'center',
//      display: 'flex',
//      flex: 1,
//      justifyContent: 'center',
//  },
//  // lottie: {
//  //     width: 50,
//  //     height: 50

//  // },
//  ModalStyle: {
//      width: 300,
//      height: 300,
//      alignItems: 'center',
//      alignSelf: 'center',
//      justifyContent: 'center',
//      borderRadius: 20,
//      backgroundColor: '#ffffff',
//  },
//  ButtonLogin: {
//      width: 200,
//      height: 50,
//      alignSelf: 'center',
//      alignItems: 'center',
//      justifyContent: 'center',
//      borderRadius: 25,
//      backgroundColor: 'rgba(214, 208, 208,1)',
//  },

//  ButtonBack: {
//      top: 50,
//      width: 200,
//      height: 50,
//      alignSelf: 'center',
//      alignItems: 'center',
//      justifyContent: 'center',
//      borderRadius: 25,
//      backgroundColor: 'rgba(214, 208, 208,1)',
//  },
//  TextInputForm: {
//      color: 'black',
//      backgroundColor: 'rgba(214, 208, 208,1)',
//      margin: 20,
//      borderRadius: 25,
//      width: 300,
//      paddingLeft: 20,
//  },
//  // loginTextBlur: {
//  //     color: 'grey'
//  // },
//  errorText: {
//      fontSize: 12,
//      color: 'red',
//      right: -30,
//      top: -15,
//  },
// });

export default LoginScreen;

非常感谢

Answer 1

当您使用 formik 时。您只需在 onChange 中添加 handleChange。它将改变values.email。其中 email 是 filed name

的值

onChange={handleChange}

尝试更改 Formik 中的 onChange 时无法输入

Can't input when try to change onChange in Formik

reactjs

react-native

redux

formik

react-hooks