ReactJS - 绑定焦点

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(); 
    } 
} 

哪些工作。这对我来说是否是理想的解决方案，还是有更完善的“反应”方式？

Answer 1

你的组件不更新焦点的原因不是因为react的diff引擎。如果你的道具不同，反应会重新渲染组件。 您的问题源于自动对焦的方式（我认为）：自动对焦仅在初始渲染页面时进行检查和应用。

您的组件通过反应重新呈现，但第二次HTML忽略autofocus属性。

所以你的第二个解决方案是一个很好的解决方案。