TouchOpacity onPress 请求不适用于 formik 和 react-native-text-input-mask

问题描述

当我尝试登录时，按钮未发送请求。在按钮 pree 我应该控制台输出。似乎 onChangeText 和 onChange 在 TextInputMask 中无法正常工作。 TouchableOpacity 标签具有 onPress 事件，其中 onPress={()=>formikProps.handleSubmit()} 不会触发 formik 的 onSubmit 道具。 这里我使用 yup 进行验证，使用 Formik 提交数据。

    const validationSchema = yup.object().shape({
  phoneNumber: yup
    .string()
    .label("Phone Number")

    .required("Phone Number is required."),password: yup.string().label("Password").required("Password is required."),});
class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: "",password: "",press: false,ButtonStateHolder: false,};
  }
render() {
    return (
      <imagebackground style={{ width: "100%",height: "100%" }} source={bgImg}>
        <ScrollView>         
          <Formik
            initialValues={{ phoneNumber: "",password: "" }}
            onSubmit={(values,actions) => {
              this.setState({
                password: values.password,ButtonStateHolder: true,});
              console.warn(this.state.phoneNumber);
              console.warn(this.state.password);

            }}
            validationSchema={validationSchema}
          >
            {(formikProps) => (
              <React.Fragment>
                <View>
                  <View>
                    <Text>Phone number</Text>
                    <TextInputMask
                      keyboardType="number-pad"
                      ref={(ref) => (this.phoneField = ref)}
                      onChangeText={(formatted,extracted) => {                        
                        this.setState({
                          phoneNumber: extracted,});
                      }}
                      onChange={formikProps.handleChange("phoneNumber")}
                      onBlur={formikProps.handleBlur("phoneNumber")}
                      placeholder={""}
                      mask={"([000]) [000] [0000]"}
                    />
                    <Text style={styles.errMsg}>
                      {formikProps.touched.phoneNumber &&
                        formikProps.errors.phoneNumber}
                    </Text>
                  </View>
                  <View>
                    <Text style={styles.formlable}>Password</Text>
                    <TextInput
                      onChangeText={formikProps.handleChange("password")}
                      onBlur={formikProps.handleBlur("password")}
                      placeholder={""}
                      returnKeyType={"done"}
                      autoCapitalize={"none"}
                      autoCorrect={false}
                    />
                    <Text style={styles.errMsg}>
                      {formikProps.touched.password &&
                        formikProps.errors.password}
                    </Text>
                    
                    <TouchableOpacity
                      activeOpacity={0.7}
                      style={styles.btnEye}
                      onPress={this.showPass}
                    >
                      <Image source={eyeImg} style={styles.iconEye} />
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={styles.loginBottom}>
                  <TouchableOpacity
                    style={styles.button}
                    onPress={() => formikProps.handleSubmit()}
                  >
                    <Text style={styles.buttonText}> Login </Text>
                  </TouchableOpacity>
                
                </View>
              </React.Fragment>
            )}
          </Formik>
        </ScrollView>
      </imagebackground>
    );
  }
}

export default Home;

onPress 控制台日志不打印 请有人帮忙解决这个问题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）