受控组件
本质上其实就是将表单中的控件和视图模型(状态)进行绑定，之后都是针对状态进行操作。
一个基本的受控组件
文本框，用户输入的内容会在状态中进行管理：
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来获取用户选择的文件列表。然后我们可以执行文件上传的相关操作，例如显示已上传文件的名称。
