您如何在React中創建不受控制的組件？

您如何在React中創建不受控制的組件？

React中不受控制的組件是由DOM本身處理形式數據的那些，而不是由組件的狀態管理。要創建一個不受控制的組件，您可以執行以下步驟：

1. 使用defaultValue Prop ：而不是使用value來設置表單元素的初始值（這將使它受到控制），而是使用defaultValue 。例如，對於輸入字段，您將要這樣做：

    <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>

2. 避免在更改上設置狀態：在受控組件中，您將在每個更改事件上更新狀態。對於不受控制的組件，您不執行此操作。您讓DOM內部處理更改。

3. 通過參考訪問數據：由於數據未由React的狀態管理，因此您需要在需要時訪問當前值的方法。您使用React的ref系統來創建對DOM節點的引用。這是您的工作方式：

    <code class="jsx">class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } render() { return ( <form onsubmit="{this.handleSubmit}"> <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> <button type="submit">Submit</button> </form> ); } }</code>

通過遵循以下步驟，您可以在React中創建一個不受控制的組件，其中表單數據由DOM直接處理。

在反應應用中使用不受控制的組件有什麼好處？

在React應用程序中使用不受控制的組件帶有幾個好處：

1. 更容易實現：不受控制的組件更簡單地設置，因為它們不需要管理狀態和實施變更處理程序。這使它們適合簡單表格或新手反應的開發人員。
2. 更少的樣板代碼：由於不受控制的組件不需要狀態管理和事件處理程序來更新狀態，因此通常會導致代碼更少。這可以使應用程序更易於閱讀和維護。
3. 更好的性能：通過直接讓DOM處理更改，您可以在某些情況下實現更好的性能。這對於處理大型或多個輸入字段特別有用，在該字段中，每種鍵都不會觸發狀態更新和重新渲染。
4. 與非反應代碼的兼容性：如果您將REACT與現有的非反應代碼集成在一起，則不受控制的組件可以更易於使用，因為它們不需要特定於React的狀態管理系統。
5. 對於簡單用例：對於快速原型或簡單的用例，不受控制的組件可以更簡單，更快地實現，而無需複雜的狀態管理。

如何訪問React中不受控制的組件的值？

要訪問React中不受控制的組件的值，您通常使用ref系統。您可以做到這一點：

1. 創建一個參考：在組件中，使用React.createRef()或功能組件中的useRef掛鉤創建REF。

    <code class="jsx">// In a class component constructor(props) { super(props); this.inputRef = React.createRef(); } // In a functional component const inputRef = useRef(null);</code>

2. 將REF附加到DOM元素：呈現您的表單元素時，將ref傳遞給它。

    <code class="jsx">// Class component <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> // Functional component <input type="text" defaultvalue="Initial Value" ref="{inputRef}"></code>

3. 訪問值：您可以在需要時訪問未控制的組件的值，例如表單提交或任何其他事件。使用ref.current.value獲取當前值。

    <code class="jsx">// In a class component handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } // In a functional component const handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', inputRef.current.value); }</code>

通過遵循以下步驟，您可以有效地訪問React中不受控制的組件的值。

您何時應該選擇不受控制的組件，而不是反應開發中的受控組件？

在受控組件和不受控制的組件之間進行選擇取決於您項目的特定需求和復雜性。在某些情況下，您可能更喜歡不受控制的組件：

1. 簡單表格：對於不需要對錶單數據的細粒度控制的簡單表單，不受控制的組件可以更容易，更快地實現。
2. 快速原型製作：當您進行原型型或快速開發時，不受控制的組件可能會減少耗時，因為它們需要較少的設置。
3. 與非反應代碼集成：如果您將REACT集成到不使用React的現有應用程序中，則不受控制的組件可能更容易使用，因為它們與傳統的DOM操作更加緊密地對齊。
4. 性能問題：在性能至關重要的應用程序中，尤其是對於大型形式的應用程序，不受控制的組件可能會提供更好的性能，因為它們不會觸發每次更改的重新訂閱者。
5. 舊版代碼維護：如果您正在使用已經使用不受控制的組件的現有代碼，則堅持使用相同模式以保持一致性和易於維護可能會更簡單。
6. 如果不需要狀態管理：如果不需要由React的狀態管理表單數據（例如，對於簡單的搜索輸入），則不受控制的組件可能更簡單。

通常，如果您需要對形式數據及其驗證的更多控制，則受控組件是更好的選擇。但是，對於更簡單或至關重要的方案，不受控制的組件可能非常合適。

以上是您如何在React中創建不受控制的組件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！