Question

我创建了redux-form来上传带有文件的表单数据。但是我很困惑如何处理文件输入，当我尝试从表单浏览器控制台选择文件时会抛出此错误

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

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);

Answer 1

我认为问题出在这里。

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

第一次，field.input是未定义的，因此fields是空白对象，而输入字段将像这样，即“不受控制的输入”。

<input>undefined</input>

然后在字段中输入内容后，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>
    )
  }
}

Answer 2

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

<input type=“file”>

然后弄清楚如何处理输入。从： React docs

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

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

在React中更改类型文件的不受控制的输入

2 个答案: