Reactで画像プレビューを作る

【2016/12/17 追記】
React（flux）を使ったブログエンジンを開発しました！
何か参考になれば嬉しいです！

Notee
https://github.com/funaota/notee

---

Reactで画像プレビューを作る時の方法です！

作りたいもの

こんなやつ

作り方

今回のはめっちゃ簡単です。

手順

• ①Viewを作る
• ②handleChangeFileを作る

上記の②手順で簡単に作れます

①Viewを作る

var Post = React.createClass({

    getInitialState(){
        return {
            image_src: ""
        };
    },

    handleChangeFile: function(e) {

    },

    render(){
        return(
            <div>
                <input type="file" ref="file" onChange={this.handleChangeFile} />
                <img src={this.state.image_src} />
                <button onClick={this.clickPostBtn} type="button">投稿する</button>
            </div>
        );
    }
});

このように、Viewには、
fileのinputとimageを表示させるためのものを持っておきます。

また、stateには
image_srcを持っておく事にします。

②handleChangeFileを作る

var createObjectURL = (window.URL || window.webkitURL).createObjectURL || window.createObjectURL;

var Post = React.createClass({

    getInitialState(){
        return {
            image_src: ""
        };
    },

    handleChangeFile: function(e) {
        // ①イベントからfileの配列を受け取る
        var files = e.target.files;

        // ②createObjectURLで、files[0]を読み込む
        var image_url = createObjectURL(files[0]);

        // ③setStateする！
        this.setState({image_src: image_url});

    },

    render(){
        return(
            <div>
                <input type="file" ref="file" onChange={this.handleChangeFile} />
                <img src={this.state.image_src} />
                <button onClick={this.clickPostBtn} type="button">投稿する</button>
            </div>
        );
    }
});

ローカルのファイルを扱うには、URL.createObjectURLを使います。
URL.createObjectURLはこんな奴です！

完成版のコードはこちら

var createObjectURL = (window.URL || window.webkitURL).createObjectURL || window.createObjectURL;

var Post = React.createClass({

    getInitialState(){
        return {
            image_src: ""
        };
    },

    handleChangeFile: function(e) {
        var files = e.target.files;
        var image_url = files.length===0 ? "" : createObjectURL(files[0]);
        this.setState({image_src: image_url});

    },

    render(){
        return(
            <div>
                <input type="file" ref="file" onChange={this.handleChangeFile} />
                <img src={this.state.image_src} />
                <button onClick={this.clickPostBtn} type="button">投稿する</button>
            </div>
        );
    }
});