当前位置： 首页 > news >正文

React 低代码项目：组件设计

news 2025/11/1 0:33:52

React 低代码项目：组件设计

Date: February 6, 2025

React表单组件

**目标：**使用 Ant Design 表单组件，开发登录、注册、搜索功能

内容：

  • 使用 React 表单组件、受控组件
  • 使用 Ant Design 表单组件
  • 使用 表单组件的校验和错误提示，几种方案

注意事项：

  • 表单组件在 React 中比较特别，要单独学习（在HTML也一样）
  • 注意接受并理解“受控组件”，虽然看似繁琐

受控组件 vs 非受控组件

**受控组件：**值同步到 state，使用 value 属性

受控组件是指表单元素的值由 React 组件的状态（state） 完全控制的组件。也就是说，表单的输入值存储在组件的状态中，任何用户输入都会触发状态更新，从而让组件重新渲染。

特点：

  • 受控组件的值总是由 React 状态（state）驱动。
  • 表单控件（如 input, select, textarea）的值由 state 来管理，而不是通过 DOM 操作。
  • 用户在表单中的输入通过事件（如 onChange）更新组件的状态，进而影响输入框的值。

工作流程：

  1. 用户在表单控件中输入内容。
  2. onChange 事件触发，更新组件的 state。
  3. React 重新渲染组件，更新表单控件的值。

Case：

import React, { useState } from 'react';

const ControlledInput = () => {
  // 使用 state 来控制输入框的值
  const [inputValue, setInputValue] = useState('');

  // 处理输入框的变化
  const handleChange = (e) => {
    setInputValue(e.target.value);  // 更新 state
  };

  return (
    <div>
      <label>
        输入框：
        <input
          type="text"
          value={inputValue}  // 受控组件的值来自 state
          onChange={handleChange}  // 处理用户输入
        />
      </label>
      <p>输入的值: {inputValue}</p>
    </div>
  );
};

export default ControlledInput;

解释：

  • value={inputValue}：输入框的值与 state 绑定。
  • onChange={handleChange}：每次用户输入时，handleChange 会更新 inputValue 状态，React 会触发重新渲染。

**非受控组件：**值不同步 state，使用 defaultValue 属性

概念：

在 React 中，非受控组件是指表单元素的值由 DOM 自身管理，而不是由 React 的 state 来控制。你可以使用 ref 来直接访问和修改表单元素的值。与受控组件不同，非受控组件不需要绑定 value 和 onChange 来处理输入数据。

与受控组件不同，非受控组件不需要将输入框的值绑定到 state，它直接操作 DOM。

Case：

import React, { useRef } from 'react';

const UncontrolledInput = () => {
  const inputRef = useRef(); // 创建引用来访问输入框

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('输入的内容：' + inputRef.current.value); // 使用 ref 获取输入的值
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入框：
        <input type="text" ref={inputRef} /> {/* 没有绑定 state */}
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
};

export default UncontrolledInput;

受控组件与非受控组件的对比：

特性受控组件非受控组件
值来源值由组件的 state 控制值由 DOM 元素本身控制，通过 ref 获取
更新方式通过 onChange 更新 state通过 ref 获取 DOM 元素的当前值
优点- 组件状态与视图同步- 代码简单，适用于不需要实时控制的表单
- 可随时访问表单数据- 性能较好，避免了频繁的状态更新
缺点- 对于每个表单控件需要管理状态，代码较冗长- 不适合需要动态交互或表单验证的场景
适用场景- 动态表单数据交互（如验证、格式化等）- 简单的表单，数据获取仅在提交时才需要

总结：

React 推荐使用受控组件，看似繁琐，但更加可控

  • 受控组件：值由 React 状态控制，适合需要动态交互、验证、格式化等场景。
  • 非受控组件：值由 DOM 控制，适合简单表单或不需要频繁更新组件状态的场景。

搜索框开发

思考要点：

  • 搜索框的值应该传递到地址栏中。当其他组件需要使用时，可以通过该值来处理。

注意：不建议组件与组件之间直接传值，来实现状态切换。而是统一传递到地址栏，然后再获取。

http://ocalhost:3000/manage/ist
http://localhost:3000/manage/list?keyword=hello
http://localhost:3000/manage/list?keyword=hello&page=2

image.png

设计要点：

  • 传递搜索参数到URL（useNavigate）
  • URL搜索参数同步到搜索框（useSearchParams）
import React, { FC, useEffect, useState } from 'react'
import type { ChangeEvent } from 'react'
import { Input } from 'antd'
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
import { LIST_SEARCH_PLACEHOLDER } from '../constant'

const { Search } = Input

const ListSearch: FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  const [value, setValue] = useState('')
  const [searchParams] = useSearchParams()
  useEffect(() => {
    const keyword = searchParams.get(LIST_SEARCH_PLACEHOLDER) || ''
    setValue(keyword)
    // 每当 searchParams 变化时，更新 value
  }, [searchParams])

  function handleSearch(value: string) {
    nav({
      pathname,
      search: `${LIST_SEARCH_PLACEHOLDER}=${value}`,
    })
  }

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value)
  }

  return (
    <Search
      placeholder="搜索"
      allowClear
      enterButton="搜索"
      size="middle"
      value={value}
      onChange={handleChange}
      onSearch={handleSearch}
      style={{ width: '260px' }}
    />
  )
}

export default ListSearch

注册登陆页开发

注册页开发

效果：

image.png

要点：

  • 表单校验实现
  • 细节：标签框长度设计

参考：标签框长度设计

Register.tsx

import React, { FC } from 'react'
import styles from './Register.module.scss'
import { Typography, Space, Form, Input, Button } from 'antd'
import { Link } from 'react-router-dom'
import { UserAddOutlined } from '@ant-design/icons'
import { LOGIN_PATHNAME } from '../router'

const { Title } = Typography

const Register: FC = () => {
  function onFinish(values: {
    username: string
    password: string
    confirm: string
    nickname: string
  }) {
    console.log('Success:', values)
  }

  return (
    <div className={styles.container}>
      <div>
        <Space>
          <Title level={2}>
            <UserAddOutlined />
          </Title>
          <Title level={2}>注册新用户</Title>
        </Space>
      </div>
      <div>
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: '请输入你的用户名!' },
              { min: 4, max: 20, message: '用户名长度在 4-20 之间' },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: '用户名只能由字母、数字和下划线组成',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入你的密码!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirm"
            dependencies={['password']}
            rules={[
              { required: true, message: '请再次输入你的密码!' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject('两次输入的密码不一致!')
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="昵称"
            name="nickname"
            rules={[{ required: true, message: '请输入你的昵称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Link to={LOGIN_PATHNAME}>已有账户，请登陆</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Register

登陆页开发

效果：

image.png

要点：

  • 用户名、密码记住存储实现
  • useForm Hook 实现表单值同步

Login.tsx

import React, { FC, useEffect } from 'react'
import styles from './Register.module.scss'
import { Typography, Space, Form, Input, Button, Checkbox } from 'antd'
import { Link } from 'react-router-dom'
import { UserAddOutlined } from '@ant-design/icons'
import { REGISTER_PATHNAME } from '../router'

const { Title } = Typography

const USERNAME_KEY = 'USERNAME'
const PASSWORD_KEY = 'PASSWORD'

function rememberUser(username: string, password: string) {
  localStorage.setItem(USERNAME_KEY, username)
  localStorage.setItem(PASSWORD_KEY, password)
}

function deleteUserFromLocalStorage() {
  localStorage.removeItem(USERNAME_KEY)
  localStorage.removeItem(PASSWORD_KEY)
}

function getUserFromLocalStorage() {
  return {
    username: localStorage.getItem(USERNAME_KEY),
    password: localStorage.getItem(PASSWORD_KEY),
  }
}

const Login: FC = () => {
  const [form] = Form.useForm() // 第三方 hook

  useEffect(() => {
    const { username, password } = getUserFromLocalStorage()
    form.setFieldsValue({ username, password })
  }, [])

  const onFinish = (values: {
    username: string
    password: string
    remember: boolean
  }) => {
    const { remember } = values || {}
    if (remember) {
      rememberUser(values.username, values.password)
    } else {
      deleteUserFromLocalStorage()
    }
  }

  return (
    <div className={styles.container}>
      <div>
        <Space>
          <Title level={2}>
            <UserAddOutlined />
          </Title>
          <Title level={2}>登陆</Title>
        </Space>
      </div>
      <div>
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          initialValues={{ remember: true }}
          form={form}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入你的用户名!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入你的密码!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space size="large">
              <Button type="primary" htmlType="submit">
                登陆
              </Button>
              <Link to={REGISTER_PATHNAME}>注册新用户</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login

参考工具：表单校验

  • Ant Design rules
  • React-hook-form
  • Formik

封装细节

缩短请求参数

封装 useLoadQuestionListData 时，对于 opt 参数，可以不填写默认值，从而缩短请求参数。

**对比：**填写默认参数

image.png

不填写默认参数

image.png

**请求对比：**左边为填写默认参数，右边为不填写

image.png
http://www.dtcms.com/a/14044.html

相关文章：

  • Golang的并发编程案例详解
  • Linux相关知识点（持续更新）
  • 【戒抖音系列】短视频戒除-1-对推荐算法进行干扰
  • PostgreSQL错误: 编码“UTF8“的字符0x0xe9 0x94 0x99在编码“WIN1252“没有相对应值
  • YOLO11 【三】 【速通 训练+推理+导出 续】
  • 【MySQL】InnoDB单表访问方法
  • 【逆向工程】破解unity的安卓apk包
  • 如何使用DHTMLX Scheduler的拖放功能，在 JS 日程安排日历中创建一组相同的事件
  • AI软件外包需要注意什么 外包开发AI软件的关键因素是什么 如何选择AI外包开发语言
  • 基于 STM32 的病房监控系统
  • 数据库数据恢复—MongoDB丢失_mdb_catalog.wt文件导致报错的数据恢复案例
  • 【含开题报告+文档+PPT+源码】基于Spring+Vue的拾光印记婚纱影楼管理系统
  • HTML，API，RestFul API基础
  • 深入理解概率密度函数和概率的关系
  • 【鸿蒙】ArkUI-X跨平台问题集锦
  • Qt使用pri和pro文件进行模块化编程
  • 基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真
  • html 点击弹出视频弹窗
  • PyCharm结合DeepSeek-R1
  • 一场始于 Selector Error 的拯救行动：企查查数据采集故障排查记
  • 苹果AI战略新动向：携手阿里巴巴，深化中国市场布局
  • Win10环境使用Dockerdesktop部署Dify集成Deepseek
  • DeepSeek使用技巧大全（含本地部署教程）
  • IDEA使用codeGPT集合deepseek
  • PyCharm 批量替换
  • pytest测试专题 - 1.3 测试用例发现规则
  • 使用 meshgrid函数绘制网格点坐标的原理与代码实现
  • excel 日期转换
  • Vuex 3.x中检查模块注册的替代方法有哪些？
  • BGP基础协议详解