在循环渲染的特定job上添加评论时，需要将该job的ID传递到payload中，以便将评论与特定的job关联起来。本文将介绍如何修改表单提交处理函数，将当前循环项（job）的ID作为参数传递给`handleSubmit`函数，从而在payload中包含`jobId`。**修改表单提交处理**首先，需要修改`
修改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 ( handleSubmit(e, item)} type="submit"> handleSubmit(e, item)} // 确保点击事件也传递 item > );};export default CommentForm;
注意事项
确保item对象包含id属性，并且该属性的值是正确的job ID。在handleSubmit函数中，需要添加将payload发送到后端API的代码。请根据实际情况修改代码，确保能够正确地将评论数据存储到数据库中。在发送payload到后端之前，可以对textareaValue进行验证，例如检查是否为空或是否包含恶意代码。
总结
通过以上步骤，我们成功地将job ID从循环传递到payload中，从而实现了评论与特定job的关联。这种方法可以应用于各种需要将循环数据传递到事件处理函数中的场景。记住要根据你的具体需求调整代码，并确保在生产环境中进行充分的测试。
以上就是如何在循环中将job.id传递到payload以存储评论的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517415.html
微信扫一扫 
支付宝扫一扫 
