在循环渲染的 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 设计修改键名。
注意事项
- 确保 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 的代码，以保存评论。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
