Js实现reset

使用 HTMLFormElement.reset() 方法

通过 JavaScript 直接调用表单的 reset() 方法可以重置表单内的所有输入字段为初始值：

document.getElementById('myForm').reset();

手动重置表单字段

如果需要自定义重置逻辑，可以遍历表单字段并逐个重置：

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, select, textarea');

inputs.forEach(input => {
  if (input.type === 'checkbox' || input.type === 'radio') {
    input.checked = input.defaultChecked;
  } else {
    input.value = input.defaultValue;
  }
});

使用事件监听

为重置按钮添加事件监听，防止默认行为并执行自定义操作：

document.getElementById('resetBtn').addEventListener('click', (e) => {
  e.preventDefault();
  // 自定义重置逻辑
  document.getElementById('myForm').reset();
});

重置特定字段

若只需重置部分字段，可通过字段的 defaultValue 或 defaultChecked 属性还原：

document.getElementById('email').value = document.getElementById('email').defaultValue;
document.getElementById('subscribe').checked = document.getElementById('subscribe').defaultChecked;

使用框架（如 React）

在 React 中可通过状态管理实现重置：

const [formData, setFormData] = useState(initialState);

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