在循环渲染的特定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;
注意事项
- 确保item对象包含id属性，并且该属性的值是正确的job ID。
- 在handleSubmit函数中，需要添加将payload发送到后端API的代码。请根据实际情况修改代码，确保能够正确地将评论数据存储到数据库中。
- 在发送payload到后端之前，可以对textareaValue进行验证，例如检查是否为空或是否包含恶意代码。
总结
通过以上步骤，我们成功地将job ID从循环传递到payload中，从而实现了评论与特定job的关联。这种方法可以应用于各种需要将循环数据传递到事件处理函数中的场景。记住要根据你的具体需求调整代码，并确保在生产环境中进行充分的测试。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
