Reactjs 对模态/对话框的焦点输入作出反应
我正在使用React 14和ES6/7。我有一个模态对话框,它有两个输入,当它打开时,我想专注于第一个输入。对话框可以很好地打开和关闭,并且它的open属性按预期进行切换(为了简洁起见,下面省略了该代码,因为它实际上并不相关) 我尝试过自动对焦和componentDidUpdate,没有控制台错误,但似乎没有任何东西能够提供输入焦点。我错过了什么?我希望componentDidUpdate能够工作,但它不能 Dialog.jsx:Reactjs 对模态/对话框的焦点输入作出反应,reactjs,Reactjs,我正在使用React 14和ES6/7。我有一个模态对话框,它有两个输入,当它打开时,我想专注于第一个输入。对话框可以很好地打开和关闭,并且它的open属性按预期进行切换(为了简洁起见,下面省略了该代码,因为它实际上并不相关) 我尝试过自动对焦和componentDidUpdate,没有控制台错误,但似乎没有任何东西能够提供输入焦点。我错过了什么?我希望componentDidUpdate能够工作,但它不能 Dialog.jsx: ... componentDidUpdate(nextProp
...
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>
)
}
...
。。。
组件更新(下一步){
console.log(this.props)
如果(this.props.open){/证明这是他们最近修复的组件中的一个bug