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 的数据流原则
• 表单重置会清空表单内所有输入，而不仅是单个文本框