fix: 改善表单提交体验
- 所有按钮添加 type="button" 防止表单默认提交 - 添加保存按钮加载状态防止重复提交 - 提交时显示"保存中..."状态 - 使用 async/await finally 确保状态重置
This commit is contained in:
parent
82b91bbcf5
commit
94f3708ccd
@ -60,6 +60,7 @@ function App() {
|
|||||||
const [categoryForm, setCategoryForm] = useState({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
|
const [categoryForm, setCategoryForm] = useState({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
|
||||||
const [editingCategory, setEditingCategory] = useState(null)
|
const [editingCategory, setEditingCategory] = useState(null)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
const [websiteForm, setWebsiteForm] = useState({ name: '', url: '', icon: '', description: '', category_id: '', is_favorite: false })
|
const [websiteForm, setWebsiteForm] = useState({ name: '', url: '', icon: '', description: '', category_id: '', is_favorite: false })
|
||||||
|
|
||||||
useEffect(() => { loadData() }, [])
|
useEffect(() => { loadData() }, [])
|
||||||
@ -113,6 +114,8 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const saveCategory = async () => {
|
const saveCategory = async () => {
|
||||||
|
if (saving) return
|
||||||
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
const payload = {
|
const payload = {
|
||||||
name: categoryForm.name,
|
name: categoryForm.name,
|
||||||
@ -128,7 +131,9 @@ function App() {
|
|||||||
setCategoryForm({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
|
setCategoryForm({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
|
||||||
setEditingCategory(null)
|
setEditingCategory(null)
|
||||||
loadData()
|
loadData()
|
||||||
} catch (e) { console.error(e) }
|
} catch (e) { console.error(e) } finally {
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteCategory = async (id) => {
|
const deleteCategory = async (id) => {
|
||||||
@ -142,6 +147,8 @@ function App() {
|
|||||||
|
|
||||||
// 保存网站
|
// 保存网站
|
||||||
const handleWebsiteSubmit = async () => {
|
const handleWebsiteSubmit = async () => {
|
||||||
|
if (saving) return
|
||||||
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
const payload = { ...websiteForm, category_id: websiteForm.category_id || null }
|
const payload = { ...websiteForm, category_id: websiteForm.category_id || null }
|
||||||
if (modal.data) {
|
if (modal.data) {
|
||||||
@ -151,7 +158,9 @@ function App() {
|
|||||||
}
|
}
|
||||||
closeModal()
|
closeModal()
|
||||||
loadData()
|
loadData()
|
||||||
} catch (e) {}
|
} catch (e) {} finally {
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDeleteWebsite = async (id) => {
|
const handleDeleteWebsite = async (id) => {
|
||||||
@ -315,8 +324,8 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="form-actions">
|
<div className="form-actions">
|
||||||
<button className="btn btn-cancel" onClick={closeModal}>取消</button>
|
<button type="button" className="btn btn-cancel" onClick={closeModal}>取消</button>
|
||||||
<button className="btn btn-submit" onClick={handleWebsiteSubmit}>{modal.data ? '保存' : '添加'}</button>
|
<button type="button" className="btn btn-submit" onClick={handleWebsiteSubmit} disabled={saving}>{saving ? '保存中...' : (modal.data ? '保存' : '添加')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -360,8 +369,8 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-actions" style={{marginTop: '20px'}}>
|
<div className="form-actions" style={{marginTop: '20px'}}>
|
||||||
<button className="btn btn-cancel" onClick={() => { setEditingCategory(null); setCategoryForm({name: '', icon: 'folder', color: '#667eea', sort_order: 0}) }}>取消</button>
|
<button type="button" className="btn btn-cancel" onClick={() => { setEditingCategory(null); setCategoryForm({name: '', icon: 'folder', color: '#667eea', sort_order: 0}) }}>取消</button>
|
||||||
<button className="btn btn-submit" onClick={saveCategory} disabled={!categoryForm.name}>
|
<button type="button" className="btn btn-submit" onClick={saveCategory} disabled={saving || !categoryForm.name}>
|
||||||
{editingCategory ? '保存修改' : '添加分类'}
|
{editingCategory ? '保存修改' : '添加分类'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user