blob: e38c29a1daeff5adf4c3cb7215179824cd9de093 [file] [log] [blame]
// // 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;