在 React JS 中上传后更改文件（重新上传文件）

Question

这是我在 React JS 中上传多个文件并将这些文件显示在用户面前的代码。 .我在文件名称附近有两个按钮：第一个按钮名称：“删除”当用户单击它时，所有行都消失了，效果很好。第二个按钮名称：“更改”当用户点击它时，他可以上传另一个文件，新文件必须替换旧文件。我该怎么做？

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

export default class Browse extends React.Component {
  state = {
    files: []
  };

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

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

  Delete(name) {
    this.setState((prevState) => ({
      files: prevState.files.filter((file) => file.name !== name)
    }));
    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}>
              - <th style={{ textAlign: 'left' }}>{file.name} : </th>
              <th>
                <button type='file' onClick={() => this.Change(i)}>
                  Change
                </button>
              </th>
              <th>
                <button onClick={() => this.Delete(file.name)}>Delete</button>
              </th>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}

Answer 1

请检查这个例子：

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

export default class Browse extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            files: [],
            changedFileIndex: -1
        };
        this.fileUploaderRef = React.createRef();
    }

    fileUpload = (e) => {
        let changedFile = e.target.files[0];
        let uploadedFiles = e.target.files;

        if (this.state.changedFileIndex >= 0) {
            this.setState(prevState => {
                const list = [];
                prevState.files.map((file, i) => {
                    if (i === prevState.changedFileIndex)
                        list.push(changedFile);
                    else
                        list.push(file);
                });
                return {
                    files: list,
                    changedFileIndex: -1,
                };
            });
        } else if (this.state.files.length > 0) {
            this.setState(prevState => {
                return {files: [...prevState.files, ...uploadedFiles]}
            });
        } else
            this.setState({files: [...e.target.files]});
    };

    Change(index, file) {
        console.log("Change Function");
        this.setState({changedFileIndex: index});
        this.fileUploaderRef.current.click();
    }

    Delete(name) {
        this.setState(prevState => {
            const list = [];
            prevState.files.map((file, i) => {
                if (file.name !== name) {
                    list.push(file);
                }
            });
            return {
                files: list,
                changedFileIndex: -1,
            };
        });
    }

    render() {
        return (
            <div className="Browse">
                <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" ref={this.fileUploaderRef} onChange={this.fileUpload}/>
                <table className="filesName">
                    <tbody>
                    {
                        this.state.files.map((file, i) =>
                            <tr key={i}>
                                <th style={{textAlign: "left"}}>{file.name} :</th>
                                <th>
                                    <button type="file" onClick={() => this.Change(i)}>Change</button>
                                </th>
                                <th>
                                    <button onClick={() => this.Delete(file.name)}>Delete</button>
                                </th>
                            </tr>
                        )
                    }
                    </tbody>
                </table>
            </div>
        );
    }
}