react如何清除input框
清除 React 中的 Input 框
在 React 中清除 input 框的值通常通过状态管理实现。以下是几种常见的方法：
使用受控组件
通过绑定 value 和 onChange 事件，利用状态控制 input 的值：
import React, { useState } from 'react';
function ClearableInput() {
const [inputValue, setInputValue] = useState('');
const handleClear = () => {
setInputValue('');
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleClear}>清除</button>
</div>
);
}使用 ref 操作 DOM（非受控组件）
通过 useRef 直接操作 DOM 元素：
import React, { useRef } from 'react';
function ClearableInput() {
const inputRef = useRef(null);
const handleClear = () => {
if (inputRef.current) {
inputRef.current.value = '';
}
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClear}>清除</button>
</div>
);
}表单场景下的清除
在表单中结合 onSubmit 清除多个输入框：
import React, { useState } from 'react';
function FormExample() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
setFormData({ username: '', password: '' }); // 提交后清除
};
return (
<form onSubmit={handleSubmit}>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="password"
type="password"
value={formData.password}
onChange={handleChange}
/>
<button type="submit">提交</button>
</form>
);
}注意事项
- 受控组件是 React 推荐的方式，更适合动态验证或实时反馈场景。
- 非受控组件（ref 方式）可能在某些第三方库集成时更简便，但应谨慎使用以避免状态不一致。
- 表单清除时需确保所有相关状态（如错误提示、校验状态等）一并重置。
