时间戳

首页 > 解决方案 > 在 React 中更改类型文件的不受控制的输入

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

问题描述

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

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

文件上传.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);

标签： reactjsredux-form

解决方案

我认为问题就在这里。

<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>
 />

我的文件组件：

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

推荐阅读