在ReactJS中如何用自定义的onChange方法覆盖Formik的onChange方法

Question

我试图获取文件输入框的值，以便可以创建一个自定义文件输入框。但是当我尝试使用onChange属性传递值时，该值并没有传递到我调用的handleChange函数中。我还在使用formik和Yup进行表单验证，我认为当我调用onChange属性时，它会调用formik.onChange而不是我编写的自定义handleChange函数。那么我的问题是如何将我的自定义函数添加到formik.onChange函数中。我也尝试将handleChange函数放在useFormik中，但没有起作用。以下是我的代码。

    import React, { useState } from "react";
  
    
    import { Button, Card, Form, Modal, Row, Col } from "react-bootstrap";
    
    import { useFormik } from "formik";
    import * as Yup from "yup";
    
    import "../assets/css/uploadContent.css";
    

    
    let validationSchema = Yup.object().shape({
      inputFile: Yup.mixed().required("Required"),
      
      contentTitle: Yup.string().required("Content title is required"),
    
      medias: Yup.string().required("Required"),
   
      description: Yup.string().required("Required"),
    
      thumbnail: Yup.mixed()
        .required("Required"),
    });
    
    function UploadContents({ handleUpload }) {
      const [selectedFile, setSelectedFile] = useState(null);
     
    
      console.log("Files", selectedFile);
    
      const handleChange = (e) => {
    setSelectedFile(e.target.files[0]);
    console.log("Files selected are", selectedFile);
  };
    
      const formik = useFormik({
        initialValues: {
          inputFile: "",
          contentTitle: "",
        },
    
        validationSchema: validationSchema,
    
   // handleChange: (e) => {
    //   setSelectedFile(e.target.files[0]);
    //   console.log("This is the formik onchange", selectedFile);
    // },
        onSubmit: (values) => {
          console.log("Values are", values);
        },
      });
    
      return (
        <div>  
            <Form onSubmit={formik.handleSubmit}>
               <Card className="w-100 p-5 text-center file-card">
              <Form.File id="formcheck-api-regular" custom>
              <Form.File.Input
                  type="file"
                  name="inputFile"
                  onChange={formik.handleChange}
                  {...formik.getFieldProps("inputFile")}
                />
              <Form.Label id="file-label">
                <i className="fa fa-cloud-upload" />
                Upload Contents
              </Form.Label>
              {selectedFile && selectedFile ? (
                <div className="file-preview">{selectedFile}</div>
              ) : null}
              </Form.File>
              <div className="errors">
                {formik.touched.inputFile && formik.errors.inputFile ? (
                  <div>{formik.errors.inputFile}</div>
                ) : null}
              </div>
            </Card>
    
                <Form.Group className="mt-2">
                  <Form.Control
                    size="md"
                    type="text"
                    id="formGroupExampleInput"
                    placeholder="Enter content title"
                    name="contentTitle"
                    {...formik.getFieldProps("contentTitle")}
                  />
                  <div className="errors">
                    {formik.touched.contentTitle && formik.errors.contentTitle ? (
                      <div>{formik.errors.contentTitle}</div>
                    ) : null}
                  </div>
                </Form.Group>            
            </Form>
        </div>
      );
    }
    
    export default UploadContents;

- al_rus

Answer 1

您可以像这样使用自定义功能：

onChange={(e) => {
   console.log("field value change");
   formik.handleChange(e);
 }}

- othmane kahtal

Answer 2

我曾经遇到过同样的问题 这个方法对我有用

使用setFieldValue方法 将输入框的初始值设置为null，因为它可能会抛出错误

然后在你的onChange处理程序中 onChange={ev=>{ formik.setFieldValue("inputFile",ev.target.files[0]) }}

- Ayotunde Ajayi