React 低代码项目：组件设计

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.p