react-file-input icon indicating copy to clipboard operation
react-file-input copied to clipboard

Uncaught TypeError: React.createClass is not a function

Open karborator opened this issue 5 years ago • 1 comments

app.js:37554 Uncaught TypeError: React.createClass is not a function
    at Object../node_modules/react-file-input/lib/index.js (app.js:37554)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/components/PageAdd.js (app.js:53894)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/pages/car/CarAdd.js (app.js:56941)
    at __webpack_require__ (app.js:20)
    at Module.<anonymous> (app.js:56019)
    at Module../resources/js/pages/App.js (app.js:56198)
    at __webpack_require__ (app.js:20)
    at Object../resources/js/app.js (app.js:52640)
./node_modules/react-file-input/lib/index.js @ app.js:37554
__webpack_require__ @ app.js:20
./resources/js/components/PageAdd.js @ app.js:53894
__webpack_require__ @ app.js:20
./resources/js/pages/car/CarAdd.js @ app.js:56941
__webpack_require__ @ app.js:20
(anonymous) @ app.js:56019
./resources/js/pages/App.js @ app.js:56198
__webpack_require__ @ app.js:20
./resources/js/app.js @ app.js:52640
__webpack_require__ @ app.js:20
0 @ app.js:59904
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87

karborator avatar Mar 01 '20 13:03 karborator

Api needs update something like

import React from 'react';
import ReactDOM from 'react-dom';
import DOM from 'react-dom-factories';
 
class FileInput extends React.Component {
  getInitialState() {
    return {
      value: '',
      styles: {
        parent: {
          position: 'relative'
        },
        file: {
          position: 'absolute',
          top: 0,
          left: 0,
          opacity: 0,
          width: '100%',
          zIndex: 1
        },
        text: {
          position: 'relative',
          zIndex: -1
        }
      }
    };
  }

  handleChange(e) {
    this.setState({
      value: e.target.value.split(/(\\|\/)/g).pop()
    });
    if (this.props.onChange) this.props.onChange(e);
  }

  render(){
    return DOM.div({
        style: this.state.styles.parent
      },

      // Actual file input
      DOM.input({
        type: 'file',
        name: this.props.name,
        className: this.props.className,
        onChange: this.handleChange,
        disabled: this.props.disabled,
        accept: this.props.accept,
        style: this.state.styles.file
      }),

      // Emulated file input
      DOM.input({
        type: 'text',
        tabIndex: -1,
        name: this.props.name + '_filename',
        value: this.state.value,
        className: this.props.className,
        onChange: function() {},
        placeholder: this.props.placeholder,
        disabled: this.props.disabled,
        style: this.state.styles.text
      }));
  }
};

export  {FileInput};

kenkit avatar May 28 '20 17:05 kenkit