react + typescript で画像プレビュー表示

react

こんな感じにできます

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface Props {}
interface State { image_src: string; }

class Index extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      image_src: ""
    };

    this.handleChangeFile = this.handleChangeFile.bind(this);
  }

  handleChangeFile(e) {
    var files = e.target.files;

    var image_url = window.URL.createObjectURL(files[0]);

    this.setState({image_src: image_url});
  }

  clickPostBtn() {

  }

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

ReactDOM.render(
  <Index />,
  document.body.appendChild(document.createElement("div")),
);

コメント

タイトルとURLをコピーしました