当前位置：首页 > React

react如何清空input值

2026-01-24 07:27:48React

使用受控组件清空Input值

在React中，通过受控组件的方式管理输入框的值是最常见的做法。将input的value绑定到组件的state，并通过更新state来清空输入框。

import React, { useState } from 'react';

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

  const handleClear = () => {
    setInputValue(''); // 清空state，input值随之更新
  };

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

使用非受控组件清空Input值

如果使用非受控组件（通过ref直接操作DOM），可以通过ref直接修改input的value属性。

import React, { useRef } from 'react';

function ClearInputUncontrolled() {
  const inputRef = useRef(null);

  const handleClear = () => {
    if (inputRef.current) {
      inputRef.current.value = ''; // 直接操作DOM清空
    }
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClear}>清空</button>
    </div>
  );
}

结合表单清空多个Input值

当需要清空表单中的多个输入框时，可以统一管理表单的state，并通过重置state实现批量清空。

import React, { useState } from 'react';

function ClearFormExample() {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  });

  const handleClear = () => {
    setFormData({ username: '', password: '' });
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <form>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="button" onClick={handleClear}>清空表单</button>
    </form>
  );
}

使用第三方库（如Formik）

若项目中使用表单库（如Formik），可通过库提供的方法（如resetForm）清空表单。

import { useFormik } from 'formik';

function FormikClearExample() {
  const formik = useFormik({
    initialValues: { email: '' },
    onSubmit: (values) => console.log(values),
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      <button type="button" onClick={formik.resetForm}>清空</button>
    </form>
  );
}