React中只读访问DOM不使用Ref是否为反模式？附表单问题

一、是否必须使用useRef替代document.querySelectorAll？ #

React中不推荐直接使用document.querySelectorAll这类原生DOM操作，useRef是更符合React范式的选择，原因如下：

• React的虚拟DOM机制会管理DOM更新，直接用原生方法获取的DOM可能不是最新的，尤其是组件重渲染后，容易出现引用失效的问题。
• useRef能在组件整个生命周期内保持对DOM元素的稳定引用，不会因为重渲染而丢失，且不会触发组件重新渲染，性能更优。
• 虽然不是“必须”禁用原生DOM操作，但useRef更安全、更贴合React的数据流管理，能避免潜在的同步问题。

二、提交后confirmation提示无法显示的解决方案 #

大概率是状态管理或渲染逻辑问题，按以下步骤排查解决：

1. 确认confirmation是状态变量（而非普通变量） #

如果用普通变量存储提示文本，修改变量不会触发组件重渲染，自然看不到提示。必须用useState声明状态：

const [confirmation, setConfirmation] = useState('');

2. 检查条件渲染逻辑 #

确保提示元素的渲染条件正确，比如：

{confirmation && <p className="tip">{confirmation}</p>}

• 不要把条件写反（比如!confirmation）
• 避免使用赋值运算符=替代比较运算符===

3. 确保EmailJS回调中正确更新状态 #

在EmailJS的成功/失败回调里调用setConfirmation，确保回调能正常触发：

emailjs.sendForm(...)
  .then(() => {
    setConfirmation('邮件发送成功！');
  })
  .catch(() => {
    setConfirmation('发送失败，请重试');
  });

• 打开浏览器控制台，检查EmailJS请求是否成功，有没有报错信息。

4. 避免提交后意外重置状态 #

如果提交后调用了form.reset()，不要同时把confirmation重置为空，否则提示会一闪而过。如需重置表单，可在设置提示后延迟重置，或保留提示一段时间：

.then(() => {
  setConfirmation('邮件发送成功！');
  setTimeout(() => {
    formRef.current.reset();
    setConfirmation('');
  }, 3000); // 3秒后重置表单和提示
})

完整示例代码 #

import { useState, useRef } from 'react';
import emailjs from '@emailjs/browser';

const ContactForm = () => {
  const formRef = useRef(null);
  const [confirmation, setConfirmation] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    // 校验所有输入框
    const inputs = formRef.current.querySelectorAll('input, textarea');
    const allFilled = Array.from(inputs).every(input => input.value.trim() !== '');
    
    if (!allFilled) {
      setConfirmation('请填写所有必填字段');
      return;
    }

    // 发送邮件
    emailjs.sendForm('你的服务ID', '你的模板ID', formRef.current, '你的公钥')
      .then(() => {
        setConfirmation('邮件已成功发送！');
        setTimeout(() => setConfirmation(''), 3000);
      })
      .catch(() => {
        setConfirmation('发送失败，请稍后重试');
      });
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="user_name" placeholder="姓名" required />
      <input type="email" name="user_email" placeholder="邮箱" required />
      <textarea name="message" placeholder="留言" required />
      <button type="submit">发送</button>
      {confirmation && <p style={{ color: confirmation.includes('成功') ? 'green' : 'red' }}>{confirmation}</p>}
    </form>
  );
};

export default ContactForm;

内容的提问来源于stack exchange，提问作者GD1