当前位置：首页 > React

react如何清空input值

2026-03-31 15:02:40React

清空React中input值的方法

在React中清空input值可以通过以下几种方式实现：

使用受控组件方式

通过绑定value到state并更新state来清空输入框：

react如何清空input值

const [inputValue, setInputValue] = useState('');

const handleClear = () => {
  setInputValue('');
};

return (
  <div>
    <input 
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
    <button onClick={handleClear}>清除</button>
  </div>
);

使用ref的非受控组件方式

通过ref直接操作DOM元素来清空值：

react如何清空input值

const inputRef = useRef(null);

const handleClear = () => {
  inputRef.current.value = '';
};

return (
  <div>
    <input ref={inputRef} />
    <button onClick={handleClear}>清除</button>
  </div>
);

使用表单重置

如果input在form元素内，可以重置整个表单：

const formRef = useRef(null);

const handleClear = () => {
  formRef.current.reset();
};

return (
  <form ref={formRef}>
    <input name="username" />
    <button type="button" onClick={handleClear}>清除</button>
  </form>
);

使用defaultValue属性

对于非受控组件，可以通过修改key强制重置组件：

const [key, setKey] = useState(0);

const handleClear = () => {
  setKey(prevKey => prevKey + 1);
};

return (
  <div>
    <input key={key} defaultValue="" />
    <button onClick={handleClear}>清除</button>
  </div>
);

选择哪种方法取决于具体场景，受控组件方式更符合React的数据流理念，而非受控组件方式在某些特殊情况下可能更简单直接。