22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 1 | |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 2 | |
| 3 | // export default CreatePost; |
| 4 | |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 5 | import React, { useState } from 'react'; |
| 6 | import axios from 'axios'; |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 7 | import './CreatePost.css'; // 如果你打算加样式 |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 8 | |
Krishya | 2283d88 | 2025-05-27 22:25:19 +0800 | [diff] [blame] | 9 | |
Krishya | 7ec1dd0 | 2025-04-19 15:29:03 +0800 | [diff] [blame] | 10 | |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 11 | const CreatePost = ({ user_id }) => { |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 12 | const [title, setTitle] = useState(''); |
| 13 | const [content, setContent] = useState(''); |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 14 | const [imageUrl, setImageUrl] = useState(''); |
| 15 | const [message, setMessage] = useState(''); |
| 16 | const [error, setError] = useState(''); |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 17 | |
| 18 | const handleSubmit = async (e) => { |
| 19 | e.preventDefault(); |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 20 | setMessage(''); |
| 21 | setError(''); |
| 22 | |
| 23 | if (!title.trim() || !content.trim()) { |
| 24 | setError('标题和内容不能为空'); |
| 25 | return; |
| 26 | } |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 27 | |
| 28 | try { |
Krishya | 2283d88 | 2025-05-27 22:25:19 +0800 | [diff] [blame] | 29 | const res = await axios.post(`/echo/forum/posts/${user_id}/createPost`, { |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 30 | title, |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 31 | post_content: content, |
| 32 | image_url: imageUrl |
| 33 | }); |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 34 | |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 35 | setMessage(`发帖成功,帖子ID:${res.data.post_id}`); |
| 36 | setTitle(''); |
| 37 | setContent(''); |
| 38 | setImageUrl(''); |
| 39 | } catch (err) { |
| 40 | console.error(err); |
| 41 | setError(err.response?.data?.error || '发帖失败,请稍后重试'); |
| 42 | } |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 43 | }; |
| 44 | |
| 45 | return ( |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 46 | <div className="create-post-container"> |
| 47 | <h2>发表新帖子</h2> |
| 48 | <form onSubmit={handleSubmit} className="create-post-form"> |
| 49 | <div className="form-group"> |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 50 | {/* 这里加上htmlFor,并给input加id */} |
| 51 | <label htmlFor="title">标题:</label> |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 52 | <input |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 53 | id="title" // 加id |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 54 | type="text" |
| 55 | value={title} |
| 56 | onChange={(e) => setTitle(e.target.value)} |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 57 | placeholder="输入帖子标题" |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 58 | /> |
| 59 | </div> |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 60 | <div className="form-group"> |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 61 | {/* 同理,内容 */} |
| 62 | <label htmlFor="content">内容:</label> |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 63 | <textarea |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 64 | id="content" // 加id |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 65 | value={content} |
| 66 | onChange={(e) => setContent(e.target.value)} |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 67 | placeholder="输入帖子内容" |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 68 | /> |
| 69 | </div> |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 70 | <div className="form-group"> |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 71 | {/* 图片链接 */} |
| 72 | <label htmlFor="imageUrl">图片链接(可选):</label> |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 73 | <input |
Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame] | 74 | id="imageUrl" // 加id |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 75 | type="text" |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 76 | value={imageUrl} |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 77 | onChange={(e) => setImageUrl(e.target.value)} |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 78 | placeholder="例如:https://example.com/img.jpg" |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 79 | /> |
| 80 | </div> |
| 81 | <button type="submit">发布</button> |
| 82 | </form> |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 83 | |
| 84 | {message && <p className="success-text">{message}</p>} |
| 85 | {error && <p className="error-text">{error}</p>} |
Krishya | e71688a | 2025-04-10 21:25:17 +0800 | [diff] [blame] | 86 | </div> |
| 87 | ); |
| 88 | }; |
| 89 | |
22301009 | 237217b | 2025-04-20 15:15:25 +0800 | [diff] [blame] | 90 | export default CreatePost; |