react受控组件与非受控组件

最新推荐文章于 2024-08-03 09:28:46 发布

yu-bobo

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量1.6k

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/txf666/article/details/125245300

版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了React中的受控组件和非受控组件的区别。受控组件通过事件处理来管理表单数据，允许在用户输入过程中进行验证和处理。而非受控组件则直接通过ref获取最终输入值，不支持中间状态的处理。文中给出了两个组件类型的示例代码，并建议在大多数情况下使用受控组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react受控组件与非受控组件区别在于：

受控组件中输入框的值由其change事件接管，做对应的数据劫持操作，例如可以对输入框的值进行合法输入校验（匹配正则），此时表单数据由 React 组件来管理（“受开发者控制”）。
步骤：
a.创建一个state值绑定在输入框的value上；
b.输入框绑定change事件传入事件e；
c.change事件中得到输入框的值然后赋值改变state值；
d.数据组装提交到后台；

import axios from "axios";
import React, { useState, useEffect } from "react";

function ControlledComponent() {
  const [userName, setUsername] = useState("小明");
  function doSumbit() {
    const data = {
      name: userName,
    };
    console.log(data)
    axios("xxx", data);
  }
  useEffect(() => {
    console.log(userName);
  }, [userName]);

  return (
    <>
      <input value={userName} onChange={(e) => {setUsername(e.target.value);} }></input>
      <button onClick={doSumbit}>提交</button>
    </>
  );
}
export default ControlledComponent;

非受控组件则是同过ref直接获取输入框的值，只获取到最后状态的结果值，在输入过程中做不到对输入值的操作，此时表单数据将交由 DOM 节点来处理（“不受开发者控制”）。
步骤：
a.创建一个ref实例绑定到输入框的ref上；
b.通过ref.current.value获取输入框的值进行数据组装提交到后台；

import axios from "axios";
import React, { useRef } from "react";

function NotControlledComponent() {
  const inputRef = useRef();
  function doSumbit() {
    const data = {
      name: inputRef.current.value,
    };
    console.log(data);
    axios("xxx", data);
  }

  return (
    <>
      <input ref={inputRef}></input>
      <button onClick={doSumbit}>提交</button>
    </>
  );
}
export default NotControlledComponent;