React项目使用Google Script发邮件成功后不显示thankyou_message问题咨询

你用的原生form-submission-handler.js是为纯静态HTML页面设计的，脚本加载时会立即绑定页面内的表单元素。但你把脚本放在index.html的body底部时，React渲染的表单、thankyou_message节点还没挂载到DOM上，脚本找不到对应元素绑定事件，导致表单提交时走了默认的跳转逻辑，直接展示Google Script返回的JSON数据，不会触发成功消息渲染。

建议直接移除public/index.html里引入的原生脚本，用React自带的事件处理逻辑实现提交，更稳定也符合React开发规范：

import { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [showSuccess, setShowSuccess] = useState(false);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const submitData = new FormData();
    Object.entries(formData).forEach(([key, value]) => {
      submitData.append(key, value);
    })

    try {
      await fetch('你的Google Script部署端点URL', {
        method: 'POST',
        body: submitData,
        mode: 'no-cors'
      })
      // 提交成功后切换状态显示成功消息
      setShowSuccess(true);
      // 可选：清空表单
      setFormData({name: '', email: '', message: ''});
    } catch (err) {
      console.error('提交失败:', err);
    }
  }

  return (
    <div className="contact-form">
      {showSuccess ? (
        <div className="thankyou_message">
          <h3>感谢留言，我会尽快回复你！</h3>
        </div>
      ) : (
        <form onSubmit={handleSubmit}>
          <input 
            type="text" 
            name="name" 
            value={formData.name} 
            onChange={handleChange}
            placeholder="你的姓名"
            required
          />
          <input 
            type="email" 
            name="email" 
            value={formData.email} 
            onChange={handleChange}
            placeholder="你的邮箱"
            required
          />
          <textarea 
            name="message" 
            value={formData.message} 
            onChange={handleChange}
            placeholder="留言内容"
            required
          />
          <button type="submit">发送留言</button>
        </form>
      )}
    </div>
  )
}

export default ContactForm;

如果你不想修改原脚本逻辑，需要调整脚本加载时机，等表单组件挂载完成后再引入脚本：

1. 先删除public/index.html里的脚本引入代码
2. 在表单组件的挂载钩子中动态加载脚本：

import { useEffect } from 'react';

const ContactForm = () => {
  useEffect(() => {
    // 组件挂载后再加载脚本，此时表单DOM已经渲染完成
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/form-submission-handler.js`;
    script.dataset.cfasync = "false";
    document.body.appendChild(script);

    return () => {
      // 组件卸载时移除脚本，避免重复绑定
      document.body.removeChild(script);
    }
  }, []);

  // 表单JSX需要和原脚本要求的结构一致：form加class="gform"，成功消息容器加class="thankyou_message"且默认隐藏
  return (
    <div>
      <form className="gform" method="POST" action="你的Google Script部署URL">
        {/* 表单字段 */}
      </form>
      <div className="thankyou_message" style={{display: 'none'}}>
        {/* 成功消息内容 */}
      </div>
    </div>
  )
}

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