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屬性。

所以你的第二個解決方案是一個很好的解決方案。