Reactjs 在React中更改file类型的非受控输入

我创建了redux表单来上传表单数据和文件。但我在如何处理文件输入方面遇到了难题，当我试图从表单浏览器控制台选择文件时，它抛出了这个错误

组件正在更改要控制的文件类型的非受控输入。输入元件不应从非受控切换到受控

fileupload.js

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";
import Card from "@material-ui/core/Card";

class RegisterShop extends Component {
  state = {};

  renderField(field) {
    return (
      <div>
        <label>{field.label}</label>
        <input className="form-control" type={field.type} {...field.input} />
      </div>
    );
  }
  onSubmit(values) {
  let formData = new FormData();
    ////
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <Card>
          <h1>Register Shop</h1>
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Field
              label="Shop Name"
              name="shopname"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Describe about your shop"
              name="description"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Email"
              name="email"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Contact No"
              name="mobileno"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Location"
              name="locatiion"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Shop Logo"
              name="image"
              type="file"
              component="----------"  //I changed this many ways still get same error
            />
            <button type="submit" className="btn btn-primary">
              Login
            </button>
          </form>
          <br />
          <br />
        </Card>
      </div>
    );
  }
}

export default reduxForm({
  form: "registershop"
})(RegisterShop);

import React，{Component}来自“React”；
从“redux表单”导入{Field，reduxForm}；
从“@物料界面/核心/卡片”导入卡片；
类RegisterShop扩展组件{
状态={}；
渲染场（场）{
返回(
{field.label}
);
}
onSubmit（值）{
设formData=new formData（）；
////
}
render（）{
const{handleSubmit}=this.props；
返回(
挂号店
登录




);
}
}
导出默认reduxForm({
表格：“登记处”
})（登记处）；

我想问题就在这里

<input className="form-control" type={field.type} {...field.input} />

第一次，field.input是未定义的，所以fields是空白对象，输入字段将是这样的，这是“非受控输入”

未定义

在field中键入某些内容后，field.input将具有值，因此受控制组件。 也许换个说法：

  <Field
          label="Shop Logo"
          name="image"
          type="file"
          component={MyFile}
          dataAllowedFileExtensions="jpg png bmp"></Field>
 />

/>

MyFile组件：

class MyFile extends Component {
  render() {
    const { input,dataAllowedFileExtensions } = this.props
    const onInputChange = (e) => {
        e.preventDefault();
        const files = [...e.target.files];
        input.onChange(files);
    };
    return (
      <div>
        <input type="file"
               onChange={onInputChange}
               data-allowed-file-extensions={dataAllowedFileExtensions}               />
      </div>
    )
  }
}

类MyFile扩展组件{
render（）{
const{input，dataAllowedFileExtensions}=this.props
const onInputChange=（e）=>{
e、 预防默认值（）；
const files=[…e.target.files]；
input.onChange（文件）；
};
返回(
)
}
}

因为它是不受控制的组件，所以您可能希望将其保留为：

<input type=“file”>

然后找出如何处理输入。 发件人：

在React中，输入type=“file”始终是不受控制的组件，因为其值只能由用户设置，而不能通过编程进行设置。 您应该使用文件API与文件交互。以下示例显示如何创建对DOM节点的引用以访问提交处理程序中的文件：

文本字段工作正常问题是当我选择要删除的文件时upload@DulangaHeshan很抱歉误解，我已经更改了我的答案。发布完整的React代码，包括函数调用和呈现方法-我看不到你更改了什么，因为我不明白你想看reduxForm文件吗

<input type=“file”>

<input type="file" ref={this.fileInput} />