react如何清空input
清空 React 中的 Input 元素
在 React 中清空 input 元素可以通过以下几种方法实现，具体取决于是否使用受控组件或非受控组件。
使用受控组件（推荐）
受控组件通过 React 的 state 管理 input 的值。清空时只需更新对应的 state 即可。
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 直接操作 DOM 元素。清空时直接修改 DOM 的 value 属性。
import React, { useRef } from 'react';
function ClearableInput() {
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 ClearableForm() {
const formRef = useRef(null);
const handleClear = () => {
formRef.current.reset();
};
return (
<form ref={formRef}>
<input type="text" name="username" />
<button type="button" onClick={handleClear}>Clear</button>
</form>
);
}注意事项
- 受控组件是 React 推荐的方式，因为它更符合 React 的数据流理念。
- 非受控组件适用于需要直接操作 DOM 的场景，但可能引发潜在的性能问题。
- 表单重置会清空表单内所有输入字段，适用于需要批量清空的场景。
