Question

我是React的新手，并且想使用我的方法（在普通js中工作正常）。将createElement分配给变量时遇到问题。

class UploadBar extends Component {
  state = {
    selectedFile: null
  };

  fileSelectedHandler = event => {
    this.setState({
      selectedFile: event.target.files[0]
    });
  };

  fileLocalHandler = event => {
    event.preventDefault();
    let link = URL.createObjectURL(this.selectedFile);
    let link = document.createElement("a");
    link.href = URL.createObjectURL(this.selectedFile);
    document.body.appendChild(link);
    link.download = this.selectedFile.name;
    link.click();
    document.body.removeChild(link);
  };

  render() {
    return (
      <div id="uploadBar">
        <input
          multiple
          type="file"
          accept="application/pdf"
          onChange={this.fileSelectedHandler}
        />
        <button id="uploadBtn" onClick={this.fileLocalHandler}>
          Upload a file
        </button>
      </div>
    );
  }
}

您能帮助我正确使用我的fileLocalHandler方法吗？

Answer 1

您要从this.state而不是直接从this访问所选文件：

fileLocalHandler = event => {
    event.preventDefault();

    const { selectedFile } = this.state;
    let link = document.createElement("a");

    link.href = URL.createObjectURL(selectedFile);
    document.body.appendChild(link);
    link.download = selectedFile.name;
    link.click();
    document.body.removeChild(link);
};

在React中将createElement分配给变量

1 个答案: