Question

我正在使用对具有隐藏的样式和输入的应用做出反应，并在样式输入具有焦点时模拟点击

class UploadComponent extends React.Component {

 render() {
  return (
   <div className="row">
     <input type="file" className='hidden' ref="fileChooser"/>
     <input type="text" className="input-file" onFocus={this.onFocus.bind(this)} ref="fileName" />
   </div>
  );
 }

 onFocus() {
     this.refs.fileChooser.getDOMNode().click();
 }


}

它在Chrome和Safari上正常运行，但在Firefox上无法运行。

我发现它可能是firefox上的一个错误，

你知道我做错了吗？

Answer 1

出于安全原因，Firefox禁止调用HTMLInputElement.click()而不是按钮单击回调。您甚至无法使用其合成事件系统（onClick props），因为您将在原始的click-event-subscriber之外。获得这项工作的唯一方法是使用本机方式订阅：

下一个codenap应该可行。或者随意使用这个反应组件：https://www.npmjs.com/package/itsa-react-fileuploadbutton

class UploadComponent extends React.Component {

   render() {
       return (
           <div className="row">
               <input type="file" className='hidden' ref="fileChooser"/>
               <button ref="selectBtn" />Select files</button>
           </div>
       );
   }

   componentDidMount() {
       const instance = this; // `this` doesn't get minified, `instance` does
       instance.handleClick = instance.handleClick.bind(instance);
       instance._inputNode = ReactDOM.findDOMNode(instance.refs.fileChooser);
       instance._buttonNode = ReactDOM.findDOMNode(instance.refs.selectBtn);
       instance.IE8_Events = !instance._buttonNode.addEventListener;
       if (instance.IE8_Events) {
           instance._buttonNode.attachEvent('onclick', instance.handleClick);
       }
       else {
           instance._buttonNode.addEventListener('click', instance.handleClick, true);
       }
   }

   componentWillUnmount() {
       const instance = this; // `this` doesn't get minified, `instance` does
       if (instance.IE8_Events) {
           instance._buttonNode.detachEvent('onclick', instance.handleClick);
       }
       else {
           instance._buttonNode.removeEventListener('click', instance.handleClick, true);
       }
   }

   handleClick() {
       this._inputNode.click();
   }

}

单击firefox中的输入（type = file）元素时不触发事件

1 个答案: