为模态/对话框反应焦点输入

时间:2015-12-02 02:44:42

标签: reactjs

我正在使用React 14和ES6 / 7。我有一个模态对话框,有几个输入,当它打开时,我想专注于第一个输入。该对话框打开并关闭正常,它的open属性按预期切换(为简洁起见,下面省略了该代码,因为它并不真正相关)。

我已尝试过autoFocus和componentDidUpdate,并且没有控制台错误,但似乎没有任何东西可以提供输入焦点。我错过了什么?我希望componentDidUpdate可以工作,但它没有...

Dialog.jsx:

...

componentDidUpdate(nextProps){
  console.log(this.props)
  if(this.props.open) { //<-THIS IS TRUE AT THIS TIME!!!
    this.refs.emailInput.focus(); //<-NO ERRORS HERE OR AT ALL, BUT NO FOCUS EITHER
  }
}

...
render() {
  return (
    <form onSubmit={this.props.submitLogin} noValidate>
      <Dialog {...this.props}
        key="loginDialog"
        title="Login" actions={loginActions}>
        <input 
           ref="emailInput"
           key="emailField"
           placeholder="Email"
           type="email"
           autoFocus
        />
        <input
          key="passwordField"
          placeholder="Password"
          type="password"
        />
      </Dialog>
    </form>
  )
}

...

TIA!

1 个答案:

答案 0 :(得分:1)

原来这是他们最近修复的Material UI组件中的一个错误。