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

Question

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

component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled.......

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是未定义的，所以字段是空白对象，输入字段会像这样，即"an uncontrolled input"。

<input>undefined</input>

并且在字段中键入内容后，field.input 将具有值，因此被控制组件。也许更改为：

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

我的文件组件：

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

In React, an input type="file" is always an uncontrolled component because its value can only be set by a user, and not programmatically. You should use the File API to interact with the files. The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:

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

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

changing an uncontrolled input of type file in React

reactjs

redux-form