反应和自动对焦

虽然我喜欢ReactJS，但我可以说有时候我发现，在PreactJS之前很容易进行的交互非常烦人，或者至少是“间接”的。一个例子是正确地确保<input> 当单击不同组件中的按钮时，给定元素变得集中；在过去，这是三行代码，但是使用React可以更多。

让我们看一些<input> 使用ReactJS正确关注元素的策略。

autofocus

该autofocus 属性在ReactJS中被接受，但仅当<input> 使用React重新渲染该元素时：

<input type="text" autofocus="true" />

autofocus 易于使用，但仅在<input> 最初呈现时起作用；由于React只能智能地重新渲染已更改的元素，因此该autofocus 属性在所有情况下都不可靠。

componentDidUpdate 与 ref

由于我们不能仅依赖于autofocus 属性，因此可以componentDidUpdate 用来完成焦点：

class Expressions extends Component {   _input: ?HTMLInputElement;   // ....   componentDidUpdate(prevProps, prevState) {     this._input.focus();   }   render() {       return (         <div className={this.state.focused ? "focused": ""}>             <input               autofocus="true"               ref={c => (this._input = c)}             />         </div>       );     }   } }

componentDidUpdate 组件更新后触发，因此对父组件的任何更改都将触发此方法，并且您<input> 将获得焦点。在我的情况下，我通常会className在父元素上切换一个，以表明该元素处于活动状态，因此componentDidUpdate 将触发。

我对小部件间交互的观点是在Dojo的dijit UI框架时代形成的，每个小部件通常都有对每个子小部件的引用。使用ReactJS的做法是（希望）避免ref使用s并使用state，这是合乎逻辑的，但是我当中仍然有人渴望获得简单的参考，这就是第二种策略对我有意义的原因。