Question

问题：

我创建了一个React Native应用程序。我在这里使用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>

我面临的问题是，当我尝试按下“提交”按钮时，它没有调用该函数。我做了很多尝试以找到解决该问题的方法。但是我没能做到。有人可以帮助我解决这个问题吗？谢谢。

Answer 1

您应该使用

onPress={handleSubmit(submit)}

在您的按钮中。然后通过放置

给handleSubmit道具

const { handleSubmit } = props

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

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

您的表单之外。

Answer 2

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

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

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

内

onPress={props.handleSubmit}

或在回调后调用它：

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

handleSubmit是不是在带反应的Formik中调用？

2 个答案: