反应：当我使用输入type =“ file'的形式时，应该在propTypes中写什么？

Question

我在应用程序中使用Formik进行表单制作。当我将表单发送到本地服务器时，将创建带有标题的图像。附加我应该使用input type="file"的图像。但是我对使用formik的经验很少。

当我在文件InputImage.js中使用输入type =“ file'的形式时，应该在propTypes中写什么？

以及如何在标记位置的AddImage.js文件中添加input type="file"？

现在，我想创建附加类似于InputTitle.js的图像组件InputImage.js的输入。

我在不知道该写什么的地方加注注释。

AddImage.js：

const AddImage = (props) => {
    
    const {handleSubmit, values, handleChange} = useFormik({  
      initialValues: {
          title: '',
          image: ''             // Did I write correctly here?
      },
        validateOnchange: false,
        onSubmit: async (formValues) => {
              const response = await api(`${imageRoutePath}`, {
                  method:'POST',
                  body: JSON.stringify(formValues),
              });},  
    });
    
   return (
    <div>
      <form onSubmit={handleSubmit}>   
       <InputTitle                             
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,
       }}
       />
       
       <InputImage                             
         label="image"
         id="image" 
         inputProps={{
           name:'image',

            // WHAT I SHOULD WRITE THERE?  

           onChange: handleChange,
       }}
       />
       
          <button type="submit" disabled={isSubmitting}>Add</button>
     </form>
   </div>
   );
};

export default AddImage;

InputImage.js：

const InputImage = ({
    label, inputProps, error, id,     
}) => (
        <div className="formInputCategory">
          <label htmlFor={id} className="formInputLabelCategory">  
            {label}
          </label>
        <input {...inputProps} id={id} />    
          {error && <span className="formInputErrorCategory">{error}</span>} 
        </div>
    );

InputImage.propTypes = {                   
    label: PropTypes.string.isRequired,
  
     // WHAT I SHOULD WRITE THERE?

    error: PropTypes.string,
    id: PropTypes.string.isRequired, 
};

InputImage.defaultProps = { 
    error: '',
}

----------------------------------------------- ----------------------------------------

我如何编写InputTitle.js的示例：

const InputTitle = ({
    label, inputProps, error, id,     
}) => (
        <div className="formInputCategory">
          <label htmlFor={id} className="formInputLabelCategory">  
            {label}
          </label>
        <input {...inputProps} id={id} />    
          {error && <span className="formInputErrorCategory">{error}</span>} 
        </div>
    );


InputTitle.propTypes = {                   
    label: PropTypes.string.isRequired,  
    inputProps: PropTypes.instanceOf(Object).isRequired,  
    error: PropTypes.string,
    id: PropTypes.string.isRequired, 
};

InputTitle.defaultProps = { 
    error: '',
}

Answer 1

Formik默认情况下不支持文件上传，但是您可以尝试以下操作

<input id="file" name="file" type="file" onChange={(event) => {
  setFieldValue("file", event.currentTarget.files[0]);
}} />

“文件”代表您用于保存文件的密钥

setFieldValue是从<Formik />

获得的

引用：formik setFieldValue prop

---

您的代码如下：

const AddImage = (props) => {

    const {handleSubmit, values, handleChange, setFieldValue } = useFormik({  
      initialValues: {
          title: '',
          image: ''             // Did I write correctly here?
      },
        validateOnchange: false,
        onSubmit: async (formValues) => {
              const response = await api(`${imageRoutePath}`, {
                  method:'POST',
                  body: JSON.stringify(formValues),
              });},  
    });

   return (
    <div>
      <form onSubmit={handleSubmit}>   
       <InputTitle                             
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,
       }}
       />

       <InputImage                             
         label="image"
         id="image" 
         inputProps={{
           name:'file',
            id="file",
            // WHAT I SHOULD WRITE THERE?  
            type="file",
            onChange={(event) => {
              setFieldValue("file", event.currentTarget.files[0]);
            }},
       }}
       />

          <button type="submit" disabled={isSubmitting}>Add</button>
     </form>
   </div>
   );
};

export default AddImage;