Question

    <input
      type="file"
      ref={ref => {this.ref = ref}}
    />
    <button 
      onClick={(e)=> { 
        const promise = new Promise((resolve) => {
          setTimeout(() => { resolve() }, 2000) //change to 1000 works
        })
        promise.then(()=> {
          console.log('clicking');
          this.ref.click();
        })
      }}
    >
      Click me
    </button>

单击Click me按钮后，我需要在打开输入文件资源管理器之前执行一些其他操作（例如，提示登录或获取数据）。

在这种情况下，我设置了2秒的延迟，但点击不再激活。将延迟更改为1秒确实有效。

我认为该活动已过期＆＃39;在1秒之后，除了让用户再次点击之外，除了我的情况之外我什么也做不了？

Answer 1

您的代码显示您正在单击resolve方法中的文件输入。点击是在resolve的{{1}}方法中执行的。

请注意，您无法从未由用户操作直接启动的功能的promise输入click上触发。假设file在click上触发，然后点击文件将被执行。由于您正在执行与用户启动的操作无关的函数的延迟，因此onClick on click输入将不会被触发。 这是出于安全问题。

但是在你的问题中，因为你提到你想要的file，因为它们可能是纯粹的javascript相关动作。

Answer 2

我假设您要“阻止”文件事件的执行，直到您执行某些逻辑，例如登录我会从不同的角度处理它，在“虚拟”按钮的点击事件上，我会打开一个模态或登录页面/组件，要求在传递另一个事件处理程序时登录。
在登录表单提交事件中，我将检查我的身份验证逻辑，然后才决定是否要触发打开文件对话框事件。
一个基于您提供的代码的简单示例：

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const LoginPage = ({ onClick }) => {
  return (
    <div>
      <h1>Please login!</h1>
      <input type="text" placeholder="user name"/>
      <input type="password" placeholder="password" />
      <button type="button" onClick={onClick}>Login</button>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showLogin: false
    };

    this.onBtnClick = this.onBtnClick.bind(this);
    this.onLogin = this.onLogin.bind(this);
  }

  onBtnClick(e) {
    // if not logged in...
    this.setState({showLogin: true});
  }

  onLogin(data) {
    // check log in success logic etc...
    // if success
    this.setState({showLogin: false});
    this.ref.click();
  }

  render() {
    const {showLogin} = this.state;
    return (
      <div style={styles}>
        <input
          type="file"
          ref={ref => {
            this.ref = ref;
          }}
        />
        <button onClick={this.onBtnClick}>Click me</button>
        {showLogin && <LoginPage onClick={this.onLogin} />}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

反应延迟按钮事件2秒

2 个答案: