在 React 中聚焦輸入字段後期渲染
在初始渲染後操作元素是前端開發中的常見需求。在 React 中，為輸入欄位實現此目的涉及設定焦點以確保無縫的使用者互動。
文件中提到的一種方法是使用 refs。這涉及到將 ref 屬性指派給渲染函數中的輸入字段，例如 ref="nameInput"。若要聚焦輸入，您可以呼叫 this.refs.nameInput.getInputDOMNode().focus();。然而，這可能並不總是按預期工作。
例如，您可能嘗試過呼叫 this.refs.nameInput.getInputDOMNode().focus();在 componentDidMount() 生命週期方法中。但是，這不起作用，因為 DOM 節點在該階段尚不可用。
相反，應該在 DOM 渲染後設定焦點。實現此目的的一種方法是為焦點操作建立函數並從 componentDidUpdate() 生命週期方法呼叫它。這是一個範例：
<code class="javascript">class MyComponent extends React.Component {
focusInput() {
this.inputElement.focus();
}
componentDidUpdate() {
this.focusInput();
}
render() {
return <input ref={el => this.inputElement = el} />;
}
}</code>或者，您可以利用 autoFocus 屬性：
<code class="javascript"><input autoFocus name="..." /></code>
這可確保輸入在安裝時自動接收焦點。注意 JSX 中 autoFocus 屬性的大寫。
以上是渲染後如何在 React 中聚焦輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
