如何在循环渲染的组件中将特定项ID传递给表单提交的Payload

// 假设这是在某个循环内部
<div class="posts-section">
  {/* ... 其他职位信息 ... */}

  <Form onSubmit={handleSubmit} type="submit"> {/* 问题所在：handleSubmit无法直接获取item */}
    <InputGroup className="mb-3 comment-sect">
      {/* ... 评论输入框 ... */}
      <Form.Control
        as="textarea"
        rows={1}
        onChange={handleTextareaChange}
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
      />
      <div
        className={`comment-send-container ${textareaValue.trim() !== '' ? 'active-icon' : 'disable-icon'}`}
        onClick={handleSubmit} // 同样无法获取item
      >
        <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
      </div>
    </InputGroup>
  </Form>
</div>

// 对应的handleSubmit函数
const handleSubmit = e => {
  e.preventDefault();
  const payload = {
    comment: textareaValue,
    user: currentUser.id,
    // 缺少 jobId: item.id
  };
  console.log(payload);
  // ... 发送Payload到后端API ...
};

// 假设这是在某个循环内部，item代表当前循环的职位对象
<div class="posts-section">
  {/* ... 其他职位信息 ... */}

  {/* 修改点：通过匿名函数将item作为第二个参数传递给handleSubmit */}
  <Form onSubmit={(e) => handleSubmit(e, item)} type="submit">
    <InputGroup className="mb-3 comment-sect">
      {/* ... 评论输入框 ... */}
      <Form.Control
        as="textarea"
        rows={1}
        onChange={handleTextareaChange}
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
      />
      <div
        className={`comment-send-container ${textareaValue.trim() !== '' ? 'active-icon' : 'disable-icon'}`}
        onClick={(e) => handleSubmit(e, item)} // 如果通过onClick触发提交，也需要同样修改
      >
        <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
      </div>
    </InputGroup>
  </Form>
</div>

const handleSubmit = (e, item) => { // 接收item作为第二个参数
  e.preventDefault();

  if (!item || !item.id) {
    console.error("无法获取到有效的职位ID，评论提交失败。");
    return; // 或者进行其他错误处理
  }

  const payload = {
    jobId: item.id, // 新增：将item.id作为jobId添加到Payload
    comment: textareaValue,
    user: currentUser.id,
  };
  console.log("提交的Payload:", payload);

  // 此时，payload中包含了jobId，可以将其发送到后端API
  // 例如：axios.post('/api/comments', payload)
};

import React, { useState } from 'react';
import { Form, InputGroup, Image } from 'react-bootstrap';
// 假设FontAwesomeIcon和faPaperPlane已导入

function JobCommentSection({ jobs, currentUser }) {
  const [textareaValue, setTextareaValue] = useState('');

  const handleTextareaChange = (e) => {
    setTextareaValue(e.target.value);
  };

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

    if (!jobItem || !jobItem.id) {
      console.error("错误：无法获取到有效的职位ID。");
      return;
    }

    if (textareaValue.trim() === '') {
      alert("评论内容不能为空！");
      return;
    }

    const payload = {
      jobId: jobItem.id, // 从传递的jobItem中获取ID
      comment: textareaValue,
      user: currentUser.id, // 假设currentUser.id可用
    };

    console.log("即将提交的评论Payload:", payload);
    // 实际应用中，这里会发起API请求将数据发送到后端
    // 例如：
    // fetch('/api/comments', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(payload),
    // })
    // .then(response => response.json())
    // .then(data => {
    //   console.log('评论提交成功:', data);
    //   setTextareaValue(''); // 清空输入框
    // })
    // .catch(error => {
    //   console.error('评论提交失败:', error);
    // });

    setTextareaValue(''); // 模拟成功后清空输入
  };

  return (
    <div className="jobs-list-container">
      {jobs.map((job) => (
        <div className="job-post-card" key={job.id}>
          <h3>{job.title}</h3>
          <p>{job.description}</p>
          <div className="comment-section">
            <h4>发表评论</h4>
            {/* 关键修改在这里：将job对象传递给handleSubmit */}
            <Form onSubmit={(e) => handleSubmit(e, job)}>
              <InputGroup className="mb-3">
                <InputGroup.Text>
                  <Image src={currentUser.profil_picture} roundedCircle className="profil-comment-small" />
                </InputGroup.Text>
                <Form.Control
                  as="textarea"
                  rows={1}
                  value={textareaValue} // 受控组件
                  onChange={handleTextareaChange}
                  placeholder={`评论 ${job.title}...`}
                />
                <div
                  className={`comment-send-container ${textareaValue.trim() !== '' ? 'active-icon' : 'disable-icon'}`}
                  onClick={(e) => handleSubmit(e, job)} // 如果点击图标也提交，同样需要传递job
                >
                  {/* <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" /> */}
                  发送
                </div>
              </InputGroup>
            </Form>
            {/* 假设这里会显示现有评论 */}
            <div className="existing-comments">
              {/* ... */}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default JobCommentSection;

// 示例用法：
// const sampleJobs = [
//   { id: 'job1', title: '前端开发工程师', description: '负责前端页面开发...' },
//   { id: 'job2', title: '后端架构师', description: '负责系统架构设计...' },
// ];
// const sampleCurrentUser = { id: 'user123', name: '张三', profil_picture: 'path/to/profile.jpg' };
// <JobCommentSection jobs={sampleJobs} currentUser={sampleCurrentUser} />