react如何设置input
设置 React 中的 Input 组件
在 React 中设置 input 组件通常涉及状态管理和事件处理。以下是几种常见的方法：
受控组件方式
通过 React 的状态管理 input 的值，确保输入值与状态同步：
import { useState } from 'react';
function ControlledInput() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<input
type="text"
value={value}
onChange={handleChange}
placeholder="受控输入框"
/>
);
}非受控组件方式
使用 ref 直接访问 DOM 元素，适合不需要实时状态管理的场景：
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
alert(`输入的值: ${inputRef.current.value}`);
};
return (
<div>
<input
type="text"
ref={inputRef}
placeholder="非受控输入框"
/>
<button onClick={handleSubmit}>提交</button>
</div>
);
}表单处理
结合表单提交，通常与受控组件一起使用：
function FormExample() {
const [formData, setFormData] = useState({
username: '',
password: '',
});
const handleSubmit = (e) => {
e.preventDefault();
console.log('提交数据:', formData);
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
<button type="submit">登录</button>
</form>
);
}常见属性配置
input 组件支持多种 HTML 属性，以下是一些常用配置：
<input
type="email" // 输入类型（text, password, number 等）
defaultValue="默认值" // 非受控组件的默认值
disabled={false} // 禁用状态
readOnly={true} // 只读模式
maxLength={20} // 最大字符数
className="input-style" // CSS 类名
style={{ color: 'red' }} // 内联样式
/>输入验证
结合 HTML5 内置验证或自定义逻辑：
function ValidationExample() {
const [error, setError] = useState('');
const validateEmail = (email) => {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
};
const handleBlur = (e) => {
if (!validateEmail(e.target.value)) {
setError('请输入有效的邮箱地址');
} else {
setError('');
}
};
return (
<div>
<input
type="email"
onBlur={handleBlur}
placeholder="邮箱验证"
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}这些方法覆盖了 React 中 input 组件的常见使用场景，根据需求选择合适的方式即可。
