在React中將createElement分配給變量

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);
};