こんな感じにできます
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")), );
コメント