javascript - ReactJS - 绑定(bind)焦点

Question

我的组件有一个子组件列表，每个子组件都有一个文本输入。我的 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 ”的方式来实现这一目标？

Answer 1

你的组件不更新焦点的原因不是因为 React 的 diff 引擎。如果你的 props 不同，react 会重新渲染组件。您的问题源于(我认为)自动对焦的工作方式:仅在页面的初始渲染时检查和应用自动对焦。

你的组件由react重新渲染，但第二次，HTML会忽略autofocus属性。

所以你的第二个解决方案是一个很好的响应式(Reactive)解决方法。