[英]Click event is not triggers from the select onchange event in reactjs
I need to implement click on the file input element in react based on the value selected. 我需要根据选择的值在react中实现对文件输入元素的单击。 I below code is working fine on Linux - chrome but not working properly on windows chrome.
我下面的代码在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);
Working example on linux https://codesandbox.io/s/2wl95onqor?fontsize=14 Linux上的工作示例https://codesandbox.io/s/2wl95onqor?fontsize=14
Could you try this? 你可以试试这个吗?
this.openFileExplorer = this.openFileExplorer.bind(this);
this line should add end of the constructor. 此行应添加构造函数的末尾。
<button onClick={this.openFileExplorer}>Open</button>
<select onChange={this.handleChange}
You should change these lines like this. 您应该像这样更改这些行。 I hope it will work (i'm using macos) You can check this link;
我希望它能工作(我正在使用macos)。 https://reactjs.org/docs/handling-events.html
https://reactjs.org/docs/handling-events.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.