反应：当我在表单中使用 input type="file' 时，我应该在 propTypes 中写什么？

Question

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

当我在文件中使用 input type="file' 时，我应该在 propTypes 中写什么 InputImage.js？

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

现在我想创建附加图像组件的输入 InputImage.js 类似于 InputTitle.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]);
}} />

此处 "file" 表示您用于保存文件的密钥

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;