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; |