点击事件不是来自reactjs中的select onchange事件的触发器

时间:2019-02-27 12:46:42

标签: javascript reactjs

我需要基于所选值在react中实现对文件输入元素的单击。我下面的代码在Linux-chrome上工作正常,但在Windows chrome上无法正常工作。

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
  }

  handleChange(e) {
    if (e.target.value === "upload") {
      this.fileExplorer.click();
    }
  }
  openFileExplorer(e) {
    this.fileExplorer.click();
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.openFileExplorer.bind(this)}>Open</button>
        <select onChange={this.handleChange.bind(this)}>
          <option key="none">None</option>
          <option key="upload">upload</option>
        </select>

        <input
          type="file"
          accept=".json"
          style={{ display: "none" }}
          ref={input => (this.fileExplorer = input)}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在Linux https://codesandbox.io/s/2wl95onqor?fontsize=14上的工作示例

1 个答案:

答案 0 :(得分:0)

您可以尝试吗?

this.openFileExplorer = this.openFileExplorer.bind(this);

此行应添加构造函数的结尾。

<button onClick={this.openFileExplorer}>Open</button>
<select onChange={this.handleChange}

您应该这样更改这些行。我希望它能工作(我正在使用macos) 您可以检查此链接; https://reactjs.org/docs/handling-events.html