Question

我尝试使用redux-form在react-redux上实现文件上传，但控制台中有一个警告和异常：

警告：ConnectedField正在更改类型文件的不受控制的输入受控。输入元素不应从不受控制切换到受控制（或相反亦然）。决定使用受控或不受控制的输入组件生命周期的元素。

bundle.js:37467 Uncaught DOMException: Failed to set the 'value' property on 
'HTMLInputElement': This input element accepts a filename, which may only be 
programmatically set to the empty string.
        at Object.updateWrapper (http://localhost:8080/dist/bundle.js:37467:20)
        at ReactDOMComponent.updateComponent (http://localhost:8080/dist/bundle.js:36891:23)
        at ReactDOMComponent.receiveComponent (http://localhost:8080/dist/bundle.js:36846:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)
        at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:8080/dist/bundle.js:35829:10)
        at ReactCompositeComponentWrapper.updateComponent (http://localhost:8080/dist/bundle.js:35750:12)
        at ReactCompositeComponentWrapper.receiveComponent (http://localhost:8080/dist/bundle.js:35652:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)

以下是我的组件的代码：

import React,{Component} from 'react';
import {Field, reduxForm} from 'redux-form';

class UploadFileForm extends Component {

  onFormSubmit(data) {
    console.log(data);
  };

  render() {
    return (
      <form role="form" onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
        <div className="form-group">
          {/*<input name="file" type="file" className="file file-loading" data-allowed-file-extensions='[".owl"]'/>*/}
          <Field name="owl-file" component="input" type="file" ref="owl-file-ref"/>
          <label className="choose-file-info"></label>
        </div>
        <button type="submit" className="btn btn-primary">Upload</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'upload'
})(UploadFileForm);

Answer 1

以下对我有用;

const UploadFile = ({ input: {value: omitValue, ...inputProps }, meta: omitMeta, ...props }) => (
  <input type='file' {...inputProps} {...props} />
);

然后我就这样使用它;

<Field component={UploadFile} name='file' accept='.jpg' />

解决方案发现于： https://github.com/erikras/redux-form/issues/1989

react-redux上传文件错误

1 个答案: