七、react中收集表单数据

最新推荐文章于 2025-06-10 11:54:05 发布

快乐de馒头

最新推荐文章于 2025-06-10 11:54:05 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/126272275

本文主要探讨React中处理表单数据的两种方式：非受控组件和受控组件。非受控组件允许直接通过DOM获取表单数据，而受控组件则是通过组件状态来控制表单输入值的变化，确保数据的一致性。

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

一、非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非受控组件</title>
</head>
<body>
   <div id="app"></div> 
    <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <!--react核心库-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!--react扩展库 用于支持react操作DOM-->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!--babel 让支持jsx转js-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <!--用于对组件标签属性进行限制 全局会多一个对象PropTypes-->
   <script src="https://unpkg.com/[email protected]/prop-types.js"></script>

  
  &