【React】表单

🕗 发布于 2024-04-20 10:13 react.js 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;

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

限制了用户输入的内容：

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;

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

文本域

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;

单选与多选框

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

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来管理状态。

下拉列表

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

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元素的值：

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属性上设置值来实现。以下是一个示例：

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可以获取到输入框中的值。

文件上传

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来获取用户选择的文件列表。然后我们可以执行文件上传的相关操作，例如显示已上传文件的名称。

原文地址：https://blog.csdn.net/XiugongHao/article/details/137880296

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：react经验12:等待状态更新
下一篇：228 基于matlab的神经网络人脸识别

《生成式 AI》课程第3講 CODE TASK执行文章摘要的机器人
2.设计一个提示符，使语言模型能够对文章进行总结。1.我们希望你创建一个可以执行文章摘要的机器人。
阅读更多2024-11-17
《生成式 AI》课程第3講 CODE TASK 任务2:角色扮演的机器人
我们希望你设计一个机器人服务，你可以用LM玩角色扮演游戏。与LM进行多轮对话提示:告诉聊天机器人扮演任意角色。后续输入:与聊天机器人交互。
阅读更多2024-11-17
存在重复元素 II
判断数组中是否存在两个。
阅读更多2024-11-17
排列问题方法总结（递归+迭代）
这个代码主要就是讲的是逐步生成结果，然后它主要就是利用了一个递归的思想。首先就是先假设我求出来了前 n -1 个数的排列，然后我作为老板我只需要去排列第 n 个数。它的排法一共有三种，首先就是可以
阅读更多2024-11-17
教资考试题目
政治要强”、“情怀要深”、“视野要广”和（ BCD）不仅仅是对全国思政课教师的要求，也是广大教师强化师德修养、践行使命担当的行动指南。课程评价应将教师和学生在课程开发、实施以及教学过程中的全部情况都纳
阅读更多2024-11-17
【更新至2023】A股上市公司企业突破性创新、渐进性创新数据（2000-2023年）
参考C刊《财经问题研究》胡山（2022）老师的研究，用当年获得授权的发明专利数量加 1 后取自然对数来衡量企业突破性创新 ( Invention);用非发明专利 ( 包括实用新型专利和外观设计专利)
阅读更多2024-11-17
Stable Diffusion Hypernetwork Embedding
本节课程我们讲述了另外两种控制图像输出特征和风格的方法---embedding和hypernetwork，embedding在实践中会经常使用到，尤其在反向提示词中，我们会经常使用一些embeddin
阅读更多2024-11-17
深度学习在边缘检测中的应用及代码分析
边缘通常是指图像中像素灰度值发生急剧变化的地方，这些变化可以是由于物体与背景之间的灰度差异、物体不同表面的灰度差异等原因造成的。从数学角度来看，边缘可以看作是图像灰度函数的不连续点或其导数的极值点。
阅读更多2024-11-17
Vulnhub靶场案例渗透[10]- Momentum2
将文件下载,分析对应代码逻辑，发现请求中包含指定cookie键值对和secure参数就能上传php文件了，同时代码中提示实际cookie这个文件中指定字符串多一位大写字符串在末尾。目录下，经过上传一个
阅读更多2024-11-17
企业网络链路聚合、数据抓包、远程连接访问实验
随着信息技术的飞速发展和企业业务的不断扩大，企业网络面临着越来越多的挑战。其中，网络带宽、数据安全和远程访问等问题尤为突出。为了解决这些问题，我们进行了本次企业网络链路聚合、数据抓包和远程连接访问的实
阅读更多2024-11-17