react中的受控组件和非受控组件

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

1. 受控组件

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

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

js 复制代码
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并不会追踪或控制输入的值。非受控组件通常更适用于简单的表单输入或对实时输入不进行表单验证的情况。

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

js 复制代码
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>
  );
};

需要注意的是,受控组件和非受控组件各有其适用场景,具体使用哪种方式取决于项目需求和个人偏好。

相关推荐
花花鱼4 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09337 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135828 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning29 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人38 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00140 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css