| // // src/pages/Forum/CreatePost.jsx |
| // import React, { useState } from 'react'; |
| // import axios from 'axios'; |
| |
| // const API_BASE = process.env.REACT_APP_API_BASE; |
| |
| // const CreatePost = ({ userId }) => { |
| // const [title, setTitle] = useState(''); |
| // const [content, setContent] = useState(''); |
| // const [imgUrl, setImageUrl] = useState(''); |
| // const [isAnonymous, setIsAnonymous] = useState(false); |
| |
| // const handleSubmit = async (e) => { |
| // e.preventDefault(); |
| |
| // try { |
| // const postData = { |
| // title, |
| // postContent: content, |
| // postType: isAnonymous, |
| // }; |
| |
| // if (imgUrl.trim()) { |
| // postData.imgUrl = imgUrl; |
| // } |
| |
| // const response = await axios.post( |
| // `${API_BASE}/echo/forum/posts/${userId}/createPost`, |
| // postData |
| // ); |
| |
| |
| // if (response.status === 201) { |
| // alert('帖子创建成功!'); |
| // setTitle(''); |
| // setContent(''); |
| // setImageUrl(''); |
| // setIsAnonymous(false); |
| // } |
| // } catch (error) { |
| // console.error('帖子创建失败:', error.response?.data || error.message); |
| // alert('创建失败,请重试'); |
| // } |
| // }; |
| |
| // return ( |
| // <div className="create-post"> |
| // <h2>创建新帖子</h2> |
| // <form onSubmit={handleSubmit}> |
| // <div> |
| // <label>标题:</label> |
| // <input |
| // type="text" |
| // value={title} |
| // onChange={(e) => setTitle(e.target.value)} |
| // required |
| // /> |
| // </div> |
| // <div> |
| // <label>内容:</label> |
| // <textarea |
| // value={content} |
| // onChange={(e) => setContent(e.target.value)} |
| // required |
| // /> |
| // </div> |
| // <div> |
| // <label>图片 URL(可选):</label> |
| // <input |
| // type="text" |
| // value={imgUrl} |
| // onChange={(e) => setImageUrl(e.target.value)} |
| // /> |
| // </div> |
| // <div> |
| // <label> |
| // <input |
| // type="checkbox" |
| // checked={isAnonymous} |
| // onChange={(e) => setIsAnonymous(e.target.checked)} |
| // /> |
| // 匿名发布 |
| // </label> |
| // </div> |
| // <button type="submit">发布</button> |
| // </form> |
| // </div> |
| // ); |
| // }; |
| |
| // export default CreatePost; |
| |
| import React, { useState } from 'react'; |
| import axios from 'axios'; |
| import './CreatePost.css'; // 如果你打算加样式 |
| |
| const API_BASE = process.env.REACT_APP_API_BASE; |
| |
| const CreatePost = ({ userId }) => { |
| const [title, setTitle] = useState(''); |
| const [content, setContent] = useState(''); |
| const [imageUrl, setImageUrl] = useState(''); |
| const [message, setMessage] = useState(''); |
| const [error, setError] = useState(''); |
| |
| const handleSubmit = async (e) => { |
| e.preventDefault(); |
| setMessage(''); |
| setError(''); |
| |
| if (!title.trim() || !content.trim()) { |
| setError('标题和内容不能为空'); |
| return; |
| } |
| |
| try { |
| const res = await axios.post(`${API_BASE}/echo/forum/posts/${userId}/createPost`, { |
| title, |
| post_content: content, |
| image_url: imageUrl |
| }); |
| |
| setMessage(`发帖成功,帖子ID:${res.data.post_id}`); |
| setTitle(''); |
| setContent(''); |
| setImageUrl(''); |
| } catch (err) { |
| console.error(err); |
| setError(err.response?.data?.error || '发帖失败,请稍后重试'); |
| } |
| }; |
| |
| return ( |
| <div className="create-post-container"> |
| <h2>发表新帖子</h2> |
| <form onSubmit={handleSubmit} className="create-post-form"> |
| <div className="form-group"> |
| <label>标题:</label> |
| <input |
| type="text" |
| value={title} |
| onChange={(e) => setTitle(e.target.value)} |
| placeholder="输入帖子标题" |
| /> |
| </div> |
| <div className="form-group"> |
| <label>内容:</label> |
| <textarea |
| value={content} |
| onChange={(e) => setContent(e.target.value)} |
| placeholder="输入帖子内容" |
| /> |
| </div> |
| <div className="form-group"> |
| <label>图片链接(可选):</label> |
| <input |
| type="text" |
| value={imageUrl} |
| onChange={(e) => setImageUrl(e.target.value)} |
| placeholder="例如:https://example.com/img.jpg" |
| /> |
| </div> |
| <button type="submit">发布</button> |
| </form> |
| |
| {message && <p className="success-text">{message}</p>} |
| {error && <p className="error-text">{error}</p>} |
| </div> |
| ); |
| }; |
| |
| export default CreatePost; |