没有在formik中使用react native调用handleSubmit？答案

【问题标题】：handleSubmit is does not called in formik with reactnative?没有在formik中使用react native调用handleSubmit？
【发布时间】：2019-12-03 07:37:13
【问题描述】：

问题：

我创建了一个反应原生应用程序。我正在使用Formik。我的代码如下所示。

<Formik
  initialValues={{
    // fineId: "",
    licenceNo: "",
    location: "",
    vehicleNo: "",
    vehicle: "",
    driverDetails: "",
    // offenceId: ""
  }}
  validationSchema={Yup.object({
    licenceNo: Yup.string().required("LicenceNo Required!"),
    vehicleNo: Yup.string().required("VehicleNo Required!"),
    vehicle: Yup.string().required("Vehicle Required!"),
    driverDetails: Yup.string().required(
      "DriverDetails Required!"
    ),
    // offenceId: Yup.string().required("OffenceId Required!"),
  })}
  onSubmit={(values, formikActions) => {
    this._onPress(values);
    setTimeout(() => {
      formikActions.setSubmitting(false);
    }, 500);
  }}
>
  {props => (
    <View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          value={this.state.fineId}
          placeholder="FineId"
          placeholderTextColor="#9b9b9b"
          autoFocus
          autoCorrect={false}
          autoCapitalize="none"
          editable={false}
          selectTextOnFocus={false}
        ></TextInput>
      </View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          value={props.values.licenceNo}
          onBlur={props.handleBlur("licenceNo")}
          placeholder="Driver Licence No"
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          onChangeText={props.handleChange("licenceNo")}
          onSubmitEditing={() => {
            this.vehicleInput.focus();
          }}
        ></TextInput>
      </View>
      {props.touched.licenceNo && props.errors.licenceNo ? (
        <View style={styles.errorMessage}>
          <Text>{props.errors.licenceNo}</Text>
        </View>
      ) : null}
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Location"
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          editable={true}
          value={props.values.location}
          onChangeText={props.handleChange("location")}
        ></TextInput>
      </View>
      <View
        style={{
          flex: 1,
          marginLeft: "10%",
          marginRight: "10%",
          marginBottom: "5%"
        }}
      >
        <MapView
          provider={PROVIDER_GOOGLE}
          initialRegion={this.state.focusedLocation}
          showsUserLocation={true}
          zoomEnabled={true}
          zoomControlEnabled={true}
          style={styles.map}
          onPress={this.pickLocationHandler}
          ref={ref => (this.map = ref)}
        >
          {marker}
        </MapView>
      </View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Vehicle"
          value={props.values.vehicle}
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          onChangeText={props.handleChange("vehicle")}
          onBlur={props.handleBlur("vehicle")}
          ref={el => (this.vehicleInput = el)}
        ></TextInput>
      </View>
      {props.touched.vehicle && props.errors.vehicle ? (
        <View style={styles.errorMessage}>
          <Text>{props.errors.vehicle}</Text>
        </View>
      ) : null}
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Driver Details"
          value={props.values.driverDetails}
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          multiline={true}
          numberOfLines={4}
          onChangeText={props.handleChange("driverDetails")}
          onBlur={props.handleBlur("driverDetails")}
        ></TextInput>
      </View>
      {props.touched.driverDetails &&
        props.errors.driverDetails ? (
          <View style={styles.errorMessage}>
            <Text>{props.errors.driverDetails}</Text>
          </View>
        ) : null}


      <Button title="Do Fine" type="submit" onPress={() => (props.handleSubmit)}></Button>

    </View>
  )}
</Formik>

我面临的问题是当我尝试按下提交按钮时它不会调用该函数。我尝试了很多方法来解决这个问题。但我无法这样做。有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

标签： react-native formik

【解决方案1】：

问题是你没有调用handleSubmit 函数。

<Button title="Do Fine" type="submit" onPress={() => props.handleSubmit} />

在这部分代码中，您将按钮的onPress 定义为返回另一个函数的函数。这样做，按钮不会从 formik 调用 handleSubmit，而是会在按钮内返回它。您可以直接将handleSubmit 函数放在 onPress 中

onPress={props.handleSubmit}

或者在回调之后调用它：

onPress={() => props.handleSubmit()}

【讨论】：

它们之间有什么不同？ onPress={propa.handleSubmit} and onPress={()=>props.handleSubmit()}
没有区别。

【解决方案2】：

你应该使用

onPress={handleSubmit(submit)}

在您的按钮中。然后通过 put 给 handleSubmit 道具

const { handleSubmit } = props

以您的形式。最后只需添加

const submit = values => {
  console.log('submitting form', values)
}

在您的表单之外。

【讨论】：