react中的受控组件和非受控组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了react中的受控组件和非受控组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在React中，受控组件和非受控组件是两种处理表单输入的方式。

1. 受控组件

受控组件是指由React控制并维护其状态的组件。这意味着表单输入的值由组件的state属性来管理，每次值发生变化时都会更新state。要更新受控组件的值，需要通过onChange事件处理函数来更新state，然后再将新的值传递给组件。使用受控组件时，表单的值始终与组件的状态同步，可以方便地对输入进行验证或操作。

例如，以下代码演示了一个受控组件的例子：

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
};

你可以将 React 中的受控组件与 Vue 中的表单的 v-model 进行类比。在 React 中，受控组件通过将表单元素的值绑定到组件的状态（state）来实现数据的双向绑定。当用户输入内容时，React 会更新组件的状态，从而更新表单元素的值。这样，你可以轻松地对表单的值进行控制和处理。

类似地，Vue 中的表单的 v-model 也实现了数据的双向绑定。通过将组件的数据绑定到表单元素的值，当用户输入内容时，Vue 会自动更新组件的数据，反之亦然。

因此，你可以将 React 中的受控组件与 Vue 中的表单的 v-model 视为在不同框架中实现表单的双向绑定的相似机制。

2. 非受控组件

非受控组件则将控制权交给了DOM本身，并不维护其输入值的状态。通过使用ref属性来访问DOM节点，可以在需要时获取表单输入的当前值。这样，无论用户输入如何，React并不会追踪或控制输入的值。非受控组件通常更适用于简单的表单输入或对实时输入不进行表单验证的情况。

以下是一个非受控组件的示例：

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
};