主页 / 问题 / 1610846
Accepted
user559987
Asked:2025-04-26 16:44:12 +0000 UTC2025-04-26 16:44:12 +0000 UTC

React js 文件数组

  • 772

大家好，

此代码仅加载一个文件的名称，您能否通过示例解释如何加载文件数组。 IE。第一次单击 - 加载第一个文件的名称，第二次单击 - 在第一个文件的名称旁边出现第二个文件的名称，等等。

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

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    const arr = [this.state = {
      fileName: '',
    }];
    // this.state = {
    //   fileName: '',
    // };
  }
    render() {
      return <>
        <div>
          {/* {arr.map(o => */}
            <span>{this.state.fileName}</span>
          {/* )} */}
          <input type="file" onChange={(e) => {
            e.preventDefault();
            this.setState({ fileName: e.target.files[0].name });
          }} />
        </div>
      </>;
    }
  }

export default MyComponent;
reactjs

1 个回答

  1. Best Answer

    您当前的代码正确捕获了所选的单个文件的名称，因为e.target.files[0]它仅访问对象中的第一个文件，并且每次都用该单个名称FileList替换状态。fileName

    解决方案可能是这样的：

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

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      fileNames: [],
    };
  }

  handleFileChange = (e) => {
    e.preventDefault();
    const files = e.target.files;
    if (files.length > 0) {
      const newFileName = files[0].name;

      this.setState(prevState => ({
        fileNames: [...prevState.fileNames, newFileName]
      }));
    }
  }

  render() {
    return (
      <div>
        <div>
          {this.state.fileNames.map((fileName, index) => (
            <span key={index} style={{ marginRight: '10px' }}>
              {fileName}
            </span>
          ))}
        </div>
        <input
          type="file"
          onChange={this.handleFileChange}
        />
      </div>
    );
  }
}

export default MyComponent;
    • 0

相关问题