如何使用redux-form上传文件? [英] How to upload file with redux-form?

问题描述

尝试上传文件时，我无法在商店中获取正确的值.我得到的不是文件内容，而是 { 0: {} }.代码如下:

const renderInput = field =>(<div><input {...field.input} type={field.type}/>{field.meta.touched &&field.meta.error &&<span className={styles.error}>{field.meta.error}</span>}

);使成为() {...<form className={styles.form} onSubmit={handleSubmit(submit)}><div className={styles.interface}><label>userpic</label><字段名称=用户图片"组件={renderInput}类型=文件"/>

<div><button type="submit" disabled={submitting}>提交</button><div></表单>...}

我在网上找到的所有示例都是使用 redux-form v5 制作的.

如何在 redux-form v6 中进行文件输入?

解决方案

创建一个字段组件，如:

import React, {Component} from 'react'导出默认类 FieldFileInput 扩展组件{构造函数(道具){超级(道具)this.onChange = this.onChange.bind(this)}onChange(e) {const { 输入:{ onChange } } = this.propsonChange(e.target.files[0])}使成为(){const { input: { value } } = this.propsconst {input,label, required, meta, } = this.props//无论你从 redux-form Field 发送到组件的 props返回(<div><label>{label}</label><div><输入类型='文件'接受='.jpg、.png、.jpeg'onChange={this.onChange}/>

)}}

将此组件传递给您需要的 Field 组件.如果您追求简单的文件上传功能，则不需要额外的 Dropzone 或其他库.

I can't get correct value into the store when trying to upload a file. Instead of file content, I get something like { 0: {} }. Here's the code:

const renderInput = field => (
  <div>
    <input {...field.input} type={field.type}/>
    {
      field.meta.touched &&
      field.meta.error &&
      <span className={styles.error}>{field.meta.error}</span>
    }
  </div>
);

render() {

  ...

  <form className={styles.form} onSubmit={handleSubmit(submit)}>
    <div className={styles.interface}>
      <label>userpic</label>
      <Field
        name="userpic"
        component={renderInput}
        type="file"
      />
    </div>
    <div>
      <button type="submit" disabled={submitting}>Submit</button>
    <div>
  </form>

  ...

}

All the examples on the web that I found were made using v5 of redux-form.

How do I do file input in redux-form v6?

解决方案

Create a Field Component like:

import React, {Component} from 'react'

export default class FieldFileInput  extends Component{
  constructor(props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange(e) {
    const { input: { onChange } } = this.props
    onChange(e.target.files[0])
  }

  render(){
    const { input: { value } } = this.props
    const {input,label, required, meta, } = this.props  //whatever props you send to the component from redux-form Field
    return(
     <div><label>{label}</label>
     <div>
       <input
        type='file'
        accept='.jpg, .png, .jpeg'
        onChange={this.onChange}
       />
     </div>
     </div>
    )
}
}

Pass this component to the Field component where you needed. No need of additional Dropzone or other libraries if you are after a simple file upload functionality.

这篇关于如何使用redux-form上传文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！