如何在循环中传递 job.id 到 Payload 以存储评论-js教程-PHP中文网

如何在循环中传递 job.id 到 Payload 以存储评论

霞舞

发布： 2025-08-23 18:46:25

原创

541人浏览过

如何在循环中传递 job.id 到 Payload 以存储评论

在循环渲染的 Job 列表中，用户针对特定 Job 发表评论时，需要将该 Job 的 `id` 传递到 Payload 中，以便将评论正确关联到对应的 Job。以下将提供修改后的代码示例，并解释如何获取 `item` 对象，从而访问 `item.id` 并将其添加到 Payload 中。 **修改 Form 组件的 onSubmit 事件** 首先，需要修改 `<Form>` 组件的 `onSubmit` 事件处理方式，将 `item` 对象作为参数传递给 `handleSubmit` 函数。 ```jsx <Form onSubmit={(e) => handleSubmit(e, item)} type="submit">

这样，在 handlesubmit 函数中就可以访问到当前 job 的 item 对象。

修改 handleSubmit 函数

接下来，修改 handleSubmit 函数，使其接收 item 作为参数，并从中提取 id 值添加到 Payload 中。

const handleSubmit = (e, item) => {
  e.preventDefault();
  const payload = {
    jobId: item.id, // 将 item.id 添加到 payload 中
    comment: textareaValue,
    user: currentUser.id,
  };
  console.log(payload);

  // 在这里添加发送 Payload 到后端的代码
};

登录后复制

在上述代码中，item 对象包含了当前 Job 的所有信息，包括 id。通过 item.id 可以获取到当前 Job 的 ID，并将其添加到 Payload 中，键名为 jobId。请根据你的后端 API 设计修改键名。

注意事项

Vheer

AI图像处理平台

125

查看详情

确保 item 对象在循环中正确传递给 <Form> 组件。
根据你的后端 API 设计，修改 Payload 中 jobId 的键名。
在 handleSubmit 函数中，添加将 Payload 发送到后端 API 的代码，以保存评论。

完整代码示例

import React, { useState } from 'react';
import { Form, InputGroup, Image } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';

const JobCommentForm = ({ item, currentUser, asset, time }) => {
  const [textareaValue, setTextareaValue] = useState('');

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

  const handleSubmit = (e, item) => {
    e.preventDefault();
    const payload = {
      jobId: item.id,
      comment: textareaValue,
      user: currentUser.id,
    };
    console.log(payload);

    // 在这里添加发送 Payload 到后端的代码
  };

  return (
    <Form onSubmit={(e) => handleSubmit(e, item)} type="submit">
      <InputGroup className="mb-3 comment-sect">
        <InputGroup.Text id="inputGroup-sizing-default">
          <Image src={asset('small', currentUser.profil_picture)} rounded className="profil-comment" />
        </InputGroup.Text>

        <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)} // 确保点击事件也传递 item
        >
          <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
        </div>
      </InputGroup>
    </Form>
  );
};

export default JobCommentForm;

登录后复制

总结

通过将 item 对象传递给 handleSubmit 函数，可以方便地获取到当前 Job 的 id，并将其添加到 Payload 中。确保在循环中正确传递 item 对象，并根据你的后端 API 设计修改 Payload 的结构。最后，添加发送 Payload 到后端 API 的代码，以保存评论。

登录后复制

以上就是如何在循环中传递 job.id 到 Payload 以存储评论的详细内容，更多请关注php中文网其它相关文章！