如何从React（GatsbyJS）向PyScript传递表单数据对象

from js import xyz的方式在React/Gatsby场景下完全可行——PyScript运行在浏览器JS环境中，天然支持和React的JS上下文互通。以下是具体实现步骤：

1. 全局引入PyScript #

在Gatsby项目的gatsby-ssr.js中添加PyScript的CDN资源，确保全局环境能加载PyScript：

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>,
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />,
  ]);
};

2. 构建React表单组件并传递数据 #

用React的useState管理表单输入，提交时将数据挂载到window对象（或通过自定义事件传递），并触发PyScript的处理函数：

import { useState, useEffect } from 'react';

const FormWithPyScript = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [processResult, setProcessResult] = useState('');

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // 将表单数据挂载到window，供PyScript读取
    window.formPayload = formData;
    // 调用PyScript中暴露的处理函数
    window.processForm();
  };

  // 监听PyScript处理完成的自定义事件
  useEffect(() => {
    const handleProcessComplete = (e) => {
      setProcessResult(e.detail);
    };
    window.addEventListener('formProcessed', handleProcessComplete);
    return () => window.removeEventListener('formProcessed', handleProcessComplete);
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          placeholder="输入姓名"
          required
        />
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          placeholder="输入邮箱"
          required
        />
        <button type="submit">提交处理</button>
      </form>
      {processResult && <p className="result">处理结果：{processResult}</p>}
    </div>
  );
};

export default FormWithPyScript;

3. 编写PyScript处理逻辑 #

在项目的static目录下创建form-processor.py（Gatsby会将static目录的文件直接复制到构建产物根目录），内容如下：

from js import window, CustomEvent

def processForm():
    # 读取React传递的表单数据
    payload = window.formPayload
    # 自定义数据处理逻辑（这里示例为拼接信息）
    processed_result = f"已验证：姓名「{payload.name}」，邮箱「{payload.email}」格式有效"
    
    # 通过自定义事件将结果返回给React
    completion_event = CustomEvent.new("formProcessed", {"detail": processed_result})
    window.dispatchEvent(completion_event)

# 将处理函数挂载到window，让React可以调用
window.processForm = processForm

4. 在组件中引入PyScript文件 #

在表单组件的JSX中添加<py-script>标签引入处理脚本：

// ... 组件其余代码
return (
  <div>
    <py-script src="/form-processor.py"></py-script>
    {/* 表单和结果展示代码 */}
  </div>
);

注意事项 #

• 确保PyScript加载完成后再触发处理函数：可以监听py-script-ready事件，避免初始化未完成导致的报错。
• 复杂数据处理：如果传递文件等二进制数据，需要先在React中转为ArrayBuffer，再在PyScript中转换为Python可处理的类型。
• 数据安全性：敏感数据不建议直接通过window传递，可考虑加密后再交互。

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