当前位置：首页 > React

react中如何写重置按钮

2026-01-25 21:55:14React

重置按钮的实现方法

在React中，重置按钮通常用于将表单或组件的状态恢复到初始值。以下是几种常见的实现方式：

使用表单的reset方法

对于原生HTML表单元素，可以直接调用reset()方法：

function MyForm() {
  const formRef = useRef(null);

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

  return (
    <form ref={formRef}>
      <input type="text" name="username" />
      <input type="email" name="email" />
      <button type="button" onClick={handleReset}>重置</button>
    </form>
  );
}

使用React状态管理

当使用React状态管理表单数据时，可以通过重置状态来实现：

function MyForm() {
  const initialValues = { username: '', email: '' };
  const [formData, setFormData] = useState(initialValues);

  const handleReset = () => {
    setFormData(initialValues);
  };

  return (
    <div>
      <input 
        value={formData.username} 
        onChange={(e) => setFormData({...formData, username: e.target.value})} 
      />
      <input 
        value={formData.email} 
        onChange={(e) => setFormData({...formData, email: e.target.value})} 
      />
      <button onClick={handleReset}>重置</button>
    </div>
  );
}

使用Formik库

如果使用Formik表单库，可以利用其内置的重置功能：

import { Formik, Form, Field } from 'formik';

function MyForm() {
  const initialValues = { username: '', email: '' };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => console.log(values)}
    >
      {({ resetForm }) => (
        <Form>
          <Field name="username" />
          <Field name="email" type="email" />
          <button type="button" onClick={resetForm}>重置</button>
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

使用React Hook Form

使用React Hook Form库时，可以通过reset方法实现：

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, reset } = useForm({
    defaultValues: { username: '', email: '' }
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('username')} />
      <input {...register('email')} />
      <button type="button" onClick={() => reset()}>重置</button>
      <button type="submit">提交</button>
    </form>
  );
}

自定义重置逻辑

对于更复杂的状态重置需求，可以实现自定义重置逻辑：

function ComplexComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  const [selected, setSelected] = useState(false);

  const handleReset = () => {
    setCount(0);
    setText('');
    setSelected(false);
  };

  return (
    <div>
      <p>计数: {count}</p>
      <p>文本: {text}</p>
      <p>选择状态: {selected.toString()}</p>
      <button onClick={handleReset}>重置所有状态</button>
    </div>
  );
}

每种方法适用于不同场景，选择取决于项目使用的技术栈和具体需求。原生表单方法最简单，状态管理方法最灵活，表单库提供了更完善的功能。

react中如何写重置按钮