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>
  );
};

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

相关推荐
旧林84316 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq27 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css