【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><textareavalue={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><inputtype="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><inputtype="radio"value="option1"checked={selectedOption === 'option1'}onChange={handleOptionChange}/>选项1</label><label><inputtype="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来获取用户选择的文件列表。然后我们可以执行文件上传的相关操作，例如显示已上传文件的名称。