react如何清除input框
清除 React input 框的方法
在 React 中清除 input 框的值通常需要结合状态管理来实现。以下是几种常见的方法：
使用受控组件
通过绑定 value 和 onChange 事件，将 input 的值与 React 状态关联：
import { useState } from 'react';
function InputExample() {
const [inputValue, setInputValue] = useState('');
const handleClear = () => {
setInputValue('');
};
return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleClear}>清除</button>
</div>
);
}使用非受控组件和 ref
通过 useRef 直接操作 DOM 元素：
import { useRef } from 'react';
function InputExample() {
const inputRef = useRef(null);
const handleClear = () => {
inputRef.current.value = '';
};
return (
<div>
<input ref={inputRef} />
<button onClick={handleClear}>清除</button>
</div>
);
}表单中的清除
在表单提交后清除所有输入框：
import { useState } from 'react';
function FormExample() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleSubmit = (e) => {
e.preventDefault();
// 提交逻辑...
setFormData({ username: '', password: '' });
};
return (
<form onSubmit={handleSubmit}>
<input
value={formData.username}
onChange={(e) => setFormData({...formData, username: e.target.value})}
/>
<input
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<button type="submit">提交</button>
</form>
);
}使用第三方库
如果使用表单库如 Formik，可以通过其 API 清除表单：
import { useFormik } from 'formik';
function FormikExample() {
const formik = useFormik({
initialValues: { email: '' },
onSubmit: values => {
// 提交逻辑...
formik.resetForm();
},
});
return (
<form onSubmit={formik.handleSubmit}>
<input
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<button type="submit">提交</button>
</form>
);
}选择哪种方法取决于具体场景和项目架构。受控组件是 React 推荐的方式，适合大多数情况；非受控组件在某些特殊场景下可能更简单；表单库则提供了更强大的表单管理能力。
