【React】表单

受控组件

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

一个基本的受控组件

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

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

相关推荐
小牛itbull5 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet11 小时前
那总结下来,react就是落后了
前端·react.js
王解15 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js