react如何清空input值
使用受控组件清空Input值
在React中，通过受控组件的方式管理输入框的值是最常见的做法。将input的value绑定到组件的state，并通过更新state来清空输入框。
import React, { useState } from 'react';
function ClearInputExample() {
const [inputValue, setInputValue] = useState('');
const handleClear = () => {
setInputValue(''); // 清空state，input值随之更新
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleClear}>清空</button>
</div>
);
}使用非受控组件清空Input值
如果使用非受控组件（通过ref直接操作DOM），可以通过ref直接修改input的value属性。
import React, { useRef } from 'react';
function ClearInputUncontrolled() {
const inputRef = useRef(null);
const handleClear = () => {
if (inputRef.current) {
inputRef.current.value = ''; // 直接操作DOM清空
}
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClear}>清空</button>
</div>
);
}结合表单清空多个Input值
当需要清空表单中的多个输入框时，可以统一管理表单的state，并通过重置state实现批量清空。
import React, { useState } from 'react';
function ClearFormExample() {
const [formData, setFormData] = useState({
username: '',
password: '',
});
const handleClear = () => {
setFormData({ username: '', password: '' });
};
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
return (
<form>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="password"
value={formData.password}
onChange={handleChange}
/>
<button type="button" onClick={handleClear}>清空表单</button>
</form>
);
}使用第三方库（如Formik）
若项目中使用表单库（如Formik），可通过库提供的方法（如resetForm）清空表单。
import { useFormik } from 'formik';
function FormikClearExample() {
const formik = useFormik({
initialValues: { email: '' },
onSubmit: (values) => console.log(values),
});
return (
<form onSubmit={formik.handleSubmit}>
<input
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<button type="button" onClick={formik.resetForm}>清空</button>
</form>
);
}注意事项
- 受控组件优先：推荐使用受控组件，确保数据流可预测且符合React的设计原则。
- 避免直接操作DOM：非受控组件仅在特殊场景（如集成第三方库）时使用。
- 表单重置场景：对于复杂表单，可结合
initialValues或表单库的API实现高效清空。
