我的组件有一个子组件列表,每个子组件都有一个文本输入。我的 redux 存储有一个 activeIndex 属性,用于存储正在编辑的输入。当他们按下回车键时,redux 会适本地调度并更新事件索引。问题是焦点没有改变。这是我原来的(不起作用)代码。
<input autoFocus={this.props.index == this.props.activeInput}
此代码确实正确设置了初始焦点,但未更新。
我是否正确假设 React 的 dom-diffing 算法不包含焦点信息,因此决定不需要重新渲染任何内容?我的解决方案最终是这样的:
<input ref='input' autoFocus={this.props.index == this.props.activeInput}
componentDidUpdate(){
if (this.props.index == this.props.activeInput){
ReactDOM.findDOMNode(this.refs.input).focus();
}
}
这确实有效。对于我的情况来说,这是否是理想的解决方案,或者是否有更“ react ”的方式来实现这一目标?
最佳答案
你的组件不更新焦点的原因不是因为 React 的 diff 引擎。如果你的 props 不同,react 会重新渲染组件。 您的问题源于(我认为)自动对焦的工作方式:仅在页面的初始渲染时检查和应用自动对焦。
你的组件由react重新渲染,但第二次,HTML会忽略autofocus属性。
所以你的第二个解决方案是一个很好的响应式(Reactive)解决方法。
关于javascript - ReactJS - 绑定(bind)焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33155097/