react如何清空input
清空 React 中的 Input 元素
在 React 中清空 input 元素可以通过控制组件的状态或直接操作 DOM 来实现。以下是几种常见的方法：
使用受控组件（推荐方法）
受控组件通过 React 的状态管理 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}>Clear</button>
</div>
);
}使用非受控组件（通过 ref）
非受控组件通过 ref 直接操作 DOM 元素，清空时直接修改 input 的 value 属性。
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}>Clear</button>
</div>
);
}使用表单重置
如果 input 位于表单中，可以通过重置表单来清空所有输入字段。
import React, { useRef } from 'react';
function ClearableForm() {
const formRef = useRef(null);
const handleClear = () => {
if (formRef.current) {
formRef.current.reset();
}
};
return (
<form ref={formRef}>
<input type="text" name="inputField" />
<button type="button" onClick={handleClear}>Clear</button>
</form>
);
}注意事项
- 受控组件是 React 推荐的方式，因为它与 React 的状态管理机制更契合。
- 非受控组件适用于需要直接操作 DOM 或集成非 React 库的场景。
- 表单重置会清空表单内的所有输入字段，需谨慎使用。
