react如何清空input
清空 React 中的 Input 方法
在 React 中清空 input 可以通过以下几种方式实现：
使用受控组件方式
受控组件的值由 React 的 state 控制，清空 input 只需要将对应的 state 设为空字符串即可。
import React, { useState } from 'react';
function ClearInputExample() {
const [inputValue, setInputValue] = useState('');
const handleClear = () => {
setInputValue('');
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleClear}>Clear</button>
</div>
);
}使用非受控组件方式
通过 ref 直接访问 DOM 元素来清空 input 的值。
import React, { useRef } from 'react';
function ClearInputExample() {
const inputRef = useRef(null);
const handleClear = () => {
inputRef.current.value = '';
};
return (
<div>
<input
type="text"
ref={inputRef}
/>
<button onClick={handleClear}>Clear</button>
</div>
);
}结合表单清空
如果 input 位于表单中，可以重置整个表单来清空所有输入字段。
import React, { useRef } from 'react';
function ClearFormExample() {
const formRef = useRef(null);
const handleClear = () => {
formRef.current.reset();
};
return (
<form ref={formRef}>
<input type="text" />
<button type="button" onClick={handleClear}>Clear</button>
</form>
);
}注意事项
- 受控组件方式更符合 React 的数据流理念，推荐优先使用
- 非受控组件方式在某些特殊场景下可能更简单直接
- 表单重置会清空表单内所有输入，使用时需注意范围
