React INPUT TYPE=FILE 组件Class和funciton两种使用

creat-react-app脚手架创建的index.js和App.js里默认是function方式的组件运用：

调用原生input组件格式为：

               <input
                   type="file"
                   className="App-input-file"
                   multiple
                   onChange={handleFile}
                >
                </input>

因为function内可以不需要this绑定，所以事件调用很简单

 onChange={handleFile},

然后在render函数外面定义handleFile即可

  function handleFile (event){
      const files = [...event.target.files];
      if (files.length === 0) return;
      console.log(files)  
      for(let i=0;i<files.length;i++) {
        console.log(files[i])
        console.log(getFileURL(files[i]))
      }
  }

以上两步都未涉及到this，对于初学者来说很方便。

当然，如果要使用Class构建一个基于原生input的FileInput组件时，则需要把this绑定一并考虑否则会报错。

具体定义如下：

class FileInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          value: null,
        };
        this.handleFile = this.handleFile.bind(this);  #必须使用本语句绑定this
    }

    getFileURL(file) {
        var getUrl = null;
        if (window.createObjectURL !== undefined) { // basic
        getUrl = window.createObjectURL(file);
        } else if (window.URL !== undefined) { // mozilla(firefox)
        getUrl = window.URL.createObjectURL(file);
        } else if (window.webkitURL !== undefined) { // webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
      }

    handleFile (event){
        const files = [...event.target.files];
        if (files.length === 0) return;
        console.log(files)  
        for(let i=0;i<files.length;i++) {
        console.log(files[i])
        console.log(this.getFileURL(files[i]))
        }
    }

    render() {
        return (
            <input
               type="file"
                       id="record_file"
                       name="record_file"
                       className="App-input-file"
                       multiple
                       onChange={this.handleFile}    #比function内定义时多了this，需要在constructor内显式绑定
                    >
                    </input>
        );
    }
}