您如何在React中创建不受控制的组件？-前端问答-PHP中文网

您如何在React中创建不受控制的组件？

React中不受控制的组件是由DOM本身处理形式数据的那些，而不是由组件的状态管理。要创建一个不受控制的组件，您可以执行以下步骤：

使用defaultValue Prop ：而不是使用value来设置表单元素的初始值（这将使它受到控制），而是使用defaultValue 。例如，对于输入字段，您将要这样做：
```
 <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>
```
登录后复制
避免在更改上设置状态：在受控组件中，您将在每个更改事件上更新状态。对于不受控制的组件，您不执行此操作。您让DOM内部处理更改。

通过参考访问数据：由于数据未由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应用程序中使用不受控制的组件带有几个好处：

更容易实现：不受控制的组件更简单地设置，因为它们不需要管理状态和实施变更处理程序。这使它们适合简单表格或新手反应的开发人员。
更少的样板代码：由于不受控制的组件不需要状态管理和事件处理程序来更新状态，因此通常会导致代码更少。这可以使应用程序更易于阅读和维护。
更好的性能：通过直接让DOM处理更改，您可以在某些情况下实现更好的性能。这对于处理大型或多个输入字段特别有用，在该字段中，每种键都不会触发状态更新和重新渲染。
与非反应代码的兼容性：如果您将REACT与现有的非反应代码集成在一起，则不受控制的组件可以更易于使用，因为它们不需要特定于React的状态管理系统。
对于简单用例：对于快速原型或简单的用例，不受控制的组件可以更简单，更快地实现，而无需复杂的状态管理。

如何访问React中不受控制的组件的值？

要访问React中不受控制的组件的值，您通常使用ref系统。您可以做到这一点：

创建一个参考：在组件中，使用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>

登录后复制

将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>

登录后复制

访问值：您可以在需要时访问未控制的组件的值，例如表单提交或任何其他事件。使用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中不受控制的组件的值。