Reactjs 使用React上载文件并在网页中显示

我正在尝试使用React上传txt文件，并将这些文件或文件名显示在用户面前， 授予他更改或删除文件的权限。 这是我的：

 import React from "react";

class Browse extends React.Component
{

state =  {selectedFile:[] , textFile: []};

//fileChangedHandler  Method
fileChangedHandler =event => {        
 for(var i=0;i<event.target.files.length;i++){         
       this.state.fileees =event.target.files;
       this.setState({selectedFile: event.target.files[i]})

    this.setState((state) => {
        const textFile=[...state.textFile,state.selectedFile.name];
        return {
          textFile,
        };
    });

  }  //for
  } //fileChangedHandler

 render(){
    return(
        <div className="Browse">
                <label for="myfile">Insert DNA Files:</label>
                <input type="file" onChange={this.fileChangedHandler} id="myfile" name="myfile" multiple/>                  
                <div>
                  {this.state.selectedFile.name}
                </div>
        </div>
    );
}

} //class


export default Browse;

从“React”导入React；
类浏览扩展了React.Component
{
状态={selectedFile:[]，textFile:[]}；
//fileChangedHandler方法
fileChangedHandler=事件=>{
对于（var i=0；i{
const textFile=[…state.textFile，state.selectedFile.name]；
返回{
文本文件，
};
});
}//为了
}//fileChangedHandler
render（）{
返回(
插入DNA文件：
{this.state.selectedFile.name}
);
}
}//类
导出默认浏览；

它的工作非常好，如果我上传一个文件，我可以看到文件名，但它不工作，如果我上传多个文件。 我需要帮助解决这个问题， 为什么如果我上传了多个文件，我就不能在用户面前显示它们

---

谢谢。

您好，请检查此示例。在这里，我上传了多个文件，并在页面中显示了文件名。

import React from "react";

export default class FIleUploadExample extends React.Component {

    state = {
        files: []
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
    };

    render() {
        return (
            <div>
                <span>File Upload</span>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <ul>
                    {
                        this.state.files.map((file, i) => <li key={i}>{file.name}</li>)
                    }
                </ul>
            </div>
        );
    }
}

从“React”导入React；
导出默认类FIleUploadExample扩展React.Component{
状态={
文件：[]
};
文件上传=（e）=>{
this.setState（{files:[…e.target.files]}）；
};
render（）{
返回(
文件上传

{
this.state.files.map（（file，i）=>
{file.name}
）
}

);
}
}

我需要在文件名旁边添加两个按钮： 第一个按钮名称：“删除”当用户点击它所有的行消失。 第二个按钮名称：“更改”当用户单击它时，他可以上载另一个文件，并且新文件名必须替换旧文件名。 我该怎么做

import React from "react";
import '../index.css';
import './dna.css';



export default class Browse extends React.Component {

    state = {
        files: [],
       // changeButtons:[],
    //    deleteButtons:[]
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
       // this.setState({changeButtons:[<button>Change</button>]});
       // this.setState({deleteButtons:[<button onClick={(e)=>this.onDelete(id)}>Delete</button>]});
    };

        Change(id){
            console.log("Change Function");
        }

    Delete(id) {
        console.log("ssss")
        this.setState((prevState) => ({
          files: prevState.files.filter(files => files.id !== id),
        }))
        console.log(this.state.files.name);
      }

    render() {
        return (
            <div className="Browse">
               <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <table className="filesName">

                    {

                        this.state.files.map((file, i) => <tr key={i}>
                                                            <td style={{textAlign:"left"}}>{file.name} : </td>
                                                            <td><button onClick={() => this.Change(i)}>Change</button></td>
                                                            <td><button onClick={() => this.Delete(i)}>Delete</button></td>
                                                          </tr>)
                    }

                </table>
            </div>
        );
    }
}

从“React”导入React；
导入“../index.css”；
导入“/dna.css”；
导出默认类浏览扩展React.Component{
状态={
文件：[]，
//更改按钮：[]，
//删除按钮：[]
};
文件上传=（e）=>{
this.setState（{files:[…e.target.files]}）；
//this.setState（{changeButtons:[Change]}）；
//this.setState（{deleteButtons:[this.onDelete（id）}>Delete]}）；
};
更改（id）{
控制台日志（“更改功能”）；
}
删除（id）{
控制台日志（“ssss”）
this.setState（（prevState）=>({
files:prevState.files.filter（files=>files.id！==id），
}))
log（this.state.files.name）；
}
render（）{
返回(
插入DNA文件：
{
this.state.files.map（（文件，i）=>
{file.name}：
this.Change（i）}>Change
this.Delete（i）}>Delete
)
}
);
}
}

它的工作非常好，谢谢但当我单击Inspect并转到Component以查看状态时，文件显示为空。这正常吗？@Bharizik，不客气，兄弟。“组件”选项卡是调试工具。我对它没有详细的了解。这可能是该工具的一个缺陷，但文件对象在代码中可用。您可以对这些文件执行进一步操作。好的，谢谢。我的目的是将这些文件发送到C++编写的服务器上，并与它们一起工作。你能看到我所说的评论，关于其他两个按钮吗？Thanks@BhaaRizik，我可以看到您的评论，但您应该为其创建新问题。你正在回答的地方写问题。你们能不能单独问一个问题，给我那个链接，这样我就可以为你们准备一个例子？