React新手求助：表单提交无法从JSX传递到JS文件

你刚接触React3-4天，当前用jQuery监听表单提交没触发也没报错，核心问题出在DOM渲染时机和React开发理念冲突，下面给你具体解决方向：

一、为什么当前jQuery代码没生效？ #

1. 事件绑定时机不对：你的jQuery代码在React渲染表单前就执行了，此时#postForm元素还未被React渲染到页面，$("#postForm").submit()找不到目标元素，自然绑定不上事件。
2. jQuery加载逻辑不严谨：动态创建script标签加载jQuery时，没有等待脚本加载完成就执行绑定逻辑，可能执行绑定操作时$还未定义（没报错大概率是后续jQuery加载完成，但元素仍未渲染）。

临时修复（仅作验证，不推荐长期使用） #

如果非要用jQuery，需确保元素存在且jQuery加载完成：

// 修改独立JS文件代码
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
script.onload = function() {
    // 用事件委托监听父元素，确保表单渲染后能触发事件
    $("body").on("submit", "#postForm", function(e) {
        e.preventDefault(); // 阻止表单默认提交刷新页面
        let post = $(".commentBox").val();
        console.log("TEST TEST");
        console.log(post);
    });
};
document.getElementsByTagName('head')[0].appendChild(script);

注意必须加e.preventDefault()，否则表单提交会默认刷新页面，你看不到console.log的输出内容。

二、React的正确处理方式（强烈推荐） #

React是数据驱动视图框架，不需要用jQuery操作DOM，直接用React内置的状态管理和事件处理即可：

修改App.jsx：

import { useState } from 'react';

function Create(){
    // 用useState管理评论内容状态
    const [comment, setComment] = useState('');
    let date = new Date().getMonth()+1 + "/" + new Date().getDate() + "/" + new Date().getFullYear();

    // 表单提交处理函数
    const handleSubmit = (e) => {
        e.preventDefault(); // 阻止默认刷新行为
        console.log("TEST TEST");
        console.log(comment);
        // 此处可添加数据提交逻辑，比如发送API请求
    }

    // 监听输入框变化，实时更新状态
    const handleCommentChange = (e) => {
        setComment(e.target.value);
    }

    return (
        <div className="createBox">
            <form id="postForm" onSubmit={handleSubmit}>
                <div className='dateInput'>
                    <label>Date: {date}</label>
                </div>
                <br/>
                <div className='commentInput'>
                    <label>Comment: </label>
                    <br/>
                    <textarea 
                        type='text' 
                        className='commentBox' 
                        maxLength='2000'
                        value={comment}
                        onChange={handleCommentChange}
                    />
                </div>
                <br/>
                <div>
                    <input className='submitInput' type='submit'/>
                </div>
            </form>
        </div>
    );
}

export default Create;

之后删掉独立的JS文件，无需再引入jQuery。

关键知识点说明： #

• useState：用于管理组件内部状态（比如评论内容），状态更新会自动触发视图重新渲染。
• onSubmit：React内置的表单提交事件，直接绑定到form元素上，无需手动查找DOM。
• onChange：监听输入框内容变化，实时更新状态，实现数据与视图的双向同步。
• e.preventDefault()：必须添加，阻止表单默认的提交刷新行为，避免页面刷新导致日志无法查看。

三、额外小问题修复 #

你的CSS中.postForm类未生效，因为form元素只设置了id="postForm"，没有添加类名。要么给form加上className="postForm"，要么把CSS里的.postForm改为#postForm。

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