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

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

碧海醫心

发布： 2025-08-23 19:10:37

原创

637人浏览过

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

在循环渲染的特定job上添加评论时，需要将该job的ID传递到payload中，以便将评论与特定的job关联起来。本文将介绍如何修改表单提交处理函数，将当前循环项（job）的ID作为参数传递给`handleSubmit`函数，从而在payload中包含`jobId`。 **修改表单提交处理** 首先，需要修改`<Form>`组件的`onSubmit`事件处理函数，将`item`（代表当前循环的job对象）传递给`handleSubmit`函数。 ```jsx <Form onSubmit={(e) => handleSubmit(e, item)} type="submit"> {/* ... */} </Form>

修改handlesubmit函数

接下来，修改handleSubmit函数，使其接收event对象和item对象作为参数。在函数内部，从item对象中获取id，并将其添加到payload中。

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

  // 在此处添加发送payload到后端的代码
  // 例如：
  // fetch('/api/comments', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  //   body: JSON.stringify(payload),
  // })
  // .then(response => response.json())
  // .then(data => {
  //   console.log('Success:', data);
  // })
  // .catch((error) => {
  //   console.error('Error:', error);
  // });
};

登录后复制

完整代码示例

以下是包含上述修改的完整代码示例：

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 CommentForm = ({ 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, // 将jobId添加到payload
      comment: textareaValue,
      user: currentUser.id,
    };
    console.log(payload);

    // 在此处添加发送payload到后端的代码
    // 例如：
    // fetch('/api/comments', {
    //   method: 'POST',
    //   headers: {
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify(payload),
    // })
    // .then(response => response.json())
    // .then(data => {
    //   console.log('Success:', data);
    // })
    // .catch((error) => {
    //   console.error('Error:', error);
    // });

    // 清空textarea
    setTextareaValue('');
  };

  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}
          value={textareaValue}
          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 CommentForm;

登录后复制

注意事项