Reactで動的に行を挿入したい

Question

React とTypescriptを使ってファイルのアップロード画面を作成しようとしています。

とりあえずアップロードした画像のタイトル一覧を取得したいので、インプットエリアを作成し、ファイル名の取得をする所まではできました。
しかし、動的にファイル名を表示していくという動作がわからず、手が詰まっています。

結果的にソースの中の<table>の中のような結果が欲しいと思っております。
お詳しい方ご教授お願い致します。

import * as React from 'react';

class Detail extends React.Component {
public handleToAboutPage = () => {
const obj1 = document.getElementById("upload") as HTMLInputElement;
const filename = obj1.files
for (let i = 0; i < filename!.length; i++) {
alert(filename![i].name);
// or
alert(filename!.item(i)!.name);
}
}

public render() {
return (

<div> <input type="file" id="upload" name="file" /> <button onClick={this.handleToAboutPage}> ファイルアップロード </button> <table> <tr>aa</tr> <tr>aa</tr> </table> </div> ) } }

export default Detail;

Answer 1

質問1

アップロードした画像のタイトルを <input type="file"...> でファイルを設定したタイミングで設定したファイルのリストを取得できるか？

回答

<input type="file" id="upload" name="file" />

render() メソッド内の上記の箇所を以下のようにすると対応できると思います。

<input type="file" id="upload" name="file" onChange={this.handleToAboutPage}/>

参考情報

• HTMLElement: change event

質問2

イベントで取得したファイル一覧をページ内に表示する方法は？

回答

質問1の方法を採った場合、state でファイル一覧の変数を用意して、handleToAboutPage() では setState() で描画したいファイル名の配列を変更で、render() 内でループで table 要素に出力するのがよさそうです。

state を利用したイベント処理の扱いや render() 内でリストを描画するについては、下記の参考情報を参照してください。

参考情報

• イベント処理
• リストと key