【React】表单

谢尔登2024-04-24 13:01

受控组件

本质上其实就是将表单中的控件和视图模型(状态)进行绑定，之后都是针对状态进行操作。

一个基本的受控组件

文本框，用户输入的内容会在状态中进行管理：

javascript 复制代码 
import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <h2>受控组件示例</h2>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="输入内容" 
      />
      <p>输入的内容：{inputValue}</p>
    </div>
  );
};

export default ControlledComponent;

对用户输入的内容进行限制

限制了用户输入的内容：

javascript 复制代码 
import React, { useState } from 'react';

const RestrictedInput = () => {
  const [inputValue, setInputValue] = useState('');
  
  const handleChange = (event) => {
    const value = event.target.value;
    // 在这个示例中，我们限制用户输入的内容为纯数字，你可以根据需要修改限制条件
    const regex = /^[0-9]*$/;
    if (regex.test(value)) {
      setInputValue(value);
    }
  };

  return (
    <div>
      <h2>限制输入的受控组件示例</h2>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="只能输入数字" 
      />
      <p>输入的内容：{inputValue}</p>
    </div>
  );
};

export default RestrictedInput;

在这个示例中，我们使用了正则表达式来限制用户输入的内容为纯数字。在

文本域

javascript 复制代码 
import React, { useState } from 'react';

const ControlledTextarea = () => {
  const [textareaValue, setTextareaValue] = useState('');

  const handleChange = (event) => {
    setTextareaValue(event.target.value);
  };

  return (
    <div>
      <h2>受控文本域示例</h2>
      <textarea
        value={textareaValue}
        onChange={handleChange}
        placeholder="输入内容"
        rows={5} // 设置文本域的行数
        cols={50} // 设置文本域的列数
      />
      <p>输入的内容：{textareaValue}</p>
    </div>
  );
};

export default ControlledTextarea;

单选与多选框

以下是单选框和多选框的受控组件示例：

javascript 复制代码 
import React, { useState } from 'react';

const ControlledCheckbox = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <h2>单选框示例</h2>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        是否选中
      </label>
      <p>选中状态：{isChecked ? '是' : '否'}</p>
    </div>
  );
};

const ControlledRadio = () => {
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <h2>单选按钮示例</h2>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        选项1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        选项2
      </label>
      <p>选中的选项：{selectedOption}</p>
    </div>
  );
};

const ControlledInputs = () => {
  return (
    <div>
      <ControlledCheckbox />
      <hr />
      <ControlledRadio />
    </div>
  );
};

export default ControlledInputs;

在这个示例中，我们分别创建了两个组件，一个是用于处理复选框的ControlledCheckbox组件，另一个是用于处理单选按钮的ControlledRadio组件。它们都使用了useState来管理状态。

下拉列表

下面是一个下拉列表的受控组件示例：

javascript 复制代码 
import React, { useState } from 'react';

const ControlledSelect = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const handleSelectChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <h2>下拉列表示例</h2>
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
      <p>选择的选项：{selectedOption}</p>
    </div>
  );
};

export default ControlledSelect;

非受控组件

在大多数情况下，react 中使用的都是受控组件。某些情况下，需要传统 dom 进行处理。需要使用非受控组件。

基本示例

非受控组件通常在不需要手动控制组件状态的情况下使用。以下是一个基本的非受控组件示例，展示了如何使用ref来访问DOM元素的值：

javascript 复制代码 
import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <h2>非受控组件示例</h2>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          ref={inputRef} 
          placeholder="输入内容" 
        />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

export default UncontrolledComponent;

在这个示例中，我们使用了useRef来创建一个引用inputRef，它会指向输入框的DOM元素。当表单被提交时，我们可以通过inputRef.current.value来获取输入框的值。这里并没有使用useState来存储输入框的值，因此这是一个非受控组件。

默认值

非受控组件可以在初始化时给定默认值，这可以通过在组件的defaultValue属性上设置值来实现。以下是一个示例：

javascript 复制代码 
import React, { useRef } from 'react';

const UncontrolledComponentWithDefault = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <h2>非受控组件示例（带默认值）</h2>
      <form onSubmit={handleSubmit}>
        {/* defaultValue属性用于设置输入框的默认值 而不是 value */}
        <input 
          type="text" 
          defaultValue="默认值"
          ref={inputRef} 
          placeholder="输入内容" 
        />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

export default UncontrolledComponentWithDefault;

在这个示例中，输入框的默认值被设置为"默认值"，用户可以在此基础上进行修改。当用户提交表单时，通过inputRef.current.value可以获取到输入框中的值。

文件上传

javascript 复制代码 
import React, { useRef } from 'react';

const UncontrolledFileUpload = () => {
  const fileInputRef = useRef(null);

  const handleUpload = () => {
    // 使用fileInputRef.current.files来获取上传的文件列表
    const fileList = fileInputRef.current.files;
    if (fileList.length > 0) {
      const uploadedFile = fileList[0];
      alert(`已上传文件：${uploadedFile.name}`);
      // 在这里可以执行文件上传的操作
    } else {
      alert('请选择要上传的文件');
    }
  };

  return (
    <div>
      <h2>非受控文件上传示例</h2>
      <input 
        type="file" 
        ref={fileInputRef} 
        accept=".jpg, .jpeg, .png, .gif" // 可选的文件类型
      />
      <button onClick={handleUpload}>上传文件</button>
    </div>
  );
};

export default UncontrolledFileUpload;

在这个示例中，我们使用了useRef来创建一个引用fileInputRef，它会指向文件上传输入框的DOM元素。当用户选择文件并点击上传按钮时，我们可以通过fileInputRef.current.files来获取用户选择的文件列表。然后我们可以执行文件上传的相关操作，例如显示已上传文件的名称。

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示