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 的数据流理念，推荐优先使用
• 非受控组件方式在某些特殊场景下可能更简单直接
• 表单重置会清空表单内所有输入，使用时需注意范围