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

Question

当我尝试登录时，按钮未发送请求。在按钮前我应该控制输出。似乎 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 控制台日志未打印 有人请帮忙解决这个问题

Answer 1

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 React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View>
        <ScrollView>         
          <Formik
            initialValues={{ phoneNumber: "", password: "" }}
            onSubmit={(values, actions) => {
              alert(JSON.stringify(values));
            }}
            validationSchema={validationSchema}
          >
            {({handleChange, values, handleSubmit, touched, errors, handleBlur}) => (
              <React.Fragment>
                <View>
                  <View>
                    <Text>Phone number</Text>
                    <TextInput
                      keyboardType="number-pad"
                      onChangeText={handleChange}
                      onChange={handleChange("phoneNumber")}
                      onBlur={handleBlur("phoneNumber")}
                      placeholder={""}
                      mask={"([000]) [000] [0000]"}
                      value={values.phoneNumber}
                    />
                    <Text>
                      {touched.phoneNumber &&
                        errors.phoneNumber}
                    </Text>
                  </View>
                  <View>
                    <Text>Password</Text>
                    <TextInput
                      onChangeText={handleChange("password")}
                      onBlur={handleBlur("password")}
                      placeholder={""}
                      returnKeyType={"done"}
                      autoCapitalize={"none"}
                      autoCorrect={false}
                      value={values.password}
                    />
                    <Text>
                      {touched.password &&
                        errors.password}
                    </Text>
                  </View>
                </View>
                <View >
                  <TouchableOpacity
                    onPress={() => handleSubmit()}
                  >
                    <Text> Login </Text>
                  </TouchableOpacity>
                
                </View>
              </React.Fragment>
            )}
          </Formik>
        </ScrollView>
      </View>
    );
  }
}

您还可以使用useFormik 挂钩而不是Formik 组件来管理表单

import { useFormik } from '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."),
});

const Home = () => {
    const { handleChange, values, handleSubmit, touched, errors, handleBlur } = useFormik({
      initialValues: {
         phoneNumber: "", password: ""
      },
      onSubmit: (values, actions) => {
         alert(JSON.stringify(values));
      },
      validationSchema
    });

    console.log(values);
    
    return (
      <View>
        <ScrollView>
                <View>
                  <View>
                    <Text>Phone number</Text>
                    <TextInput
                      keyboardType="number-pad"
                      onChangeText={handleChange}
                      onChange={handleChange("phoneNumber")}
                      onBlur={handleBlur("phoneNumber")}
                      placeholder={""}
                      mask={"([000]) [000] [0000]"}
                      value={values.phoneNumber}
                    />
                    <Text>
                      {touched.phoneNumber &&
                        errors.phoneNumber}
                    </Text>
                  </View>
                  <View>
                    <Text>Password</Text>
                    <TextInput
                      onChangeText={handleChange("password")}
                      onBlur={handleBlur("password")}
                      placeholder={""}
                      returnKeyType={"done"}
                      autoCapitalize={"none"}
                      autoCorrect={false}
                      value={values.password}
                    />
                    <Text>
                      {touched.password &&
                        errors.password}
                    </Text>
                  </View>
                </View>
                <View >
                  <TouchableOpacity
                    onPress={() => handleSubmit()}
                  >
                    <Text> Login </Text>
                  </TouchableOpacity>

                </View>
        </ScrollView>
      </View>
    );
  }
}

如果我误解了什么或者对你有帮助，请告诉我