react中如何清空文本框中的内容
清空 React 文本框内容的几种方法
在 React 中清空文本框（如 <input> 或 <textarea>）的内容，可以通过以下方法实现：
使用受控组件（推荐方法）
通过状态管理文本框的值，将状态重置为空字符串即可清空内容：
import { useState } from 'react';
function TextInput() {
const [text, setText] = useState('');
const handleClear = () => {
setText('');
};
return (
<div>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button onClick={handleClear}>Clear</button>
</div>
);
}使用非受控组件
通过 useRef 直接操作 DOM 元素来清空内容：
import { useRef } from 'react';
function TextInput() {
const inputRef = useRef();
const handleClear = () => {
inputRef.current.value = '';
};
return (
<div>
<input
type="text"
ref={inputRef}
/>
<button onClick={handleClear}>Clear</button>
</div>
);
}结合表单使用
如果文本框位于表单中，可以通过重置表单来清空所有输入：
import { useRef } from 'react';
function FormExample() {
const formRef = useRef();
const handleClear = () => {
formRef.current.reset();
};
return (
<form ref={formRef}>
<input type="text" name="username" />
<button type="button" onClick={handleClear}>Clear</button>
</form>
);
}注意事项
- 受控组件是 React 推荐的方式，能更好地管理状态和数据流
- 直接操作 DOM（非受控组件）在某些特定场景下可能更简单，但违背了 React 的数据流原则
- 表单重置会清空表单内所有输入，而不仅是单个文本框
