UserForm.jsx
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { useState } from 'react';
import ApiService from '../services/api.js';
const UserForm = ({ onUserCreated }) => {
const [formData, setFormData] = useState({
name: '',
email: ''
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
if (!formData.name.trim() || !formData.email.trim()) {
setError('请填写所有字段');
return;
}
if (!isValidEmail(formData.email)) {
setError('请输入有效的邮箱地址');
return;
}
try {
setLoading(true);
setError('');
setSuccess('');
await ApiService.createUser(formData);
setFormData({ name: '', email: '' });
setSuccess('用户创建成功！');
if (onUserCreated) {
onUserCreated();
}
setTimeout(() => setSuccess(''), 3000);
} catch (err) {
setError('创建用户失败: ' + (err.response?.data?.message || err.message));
console.error('创建用户错误:', err);
} finally {
setLoading(false);
}
};
const isValidEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
if (error) setError('');
};
return (
<div className="user-form">
<h2>创建新用户</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">姓名:</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="请输入用户姓名"
disabled={loading}
required
/>
</div>
<div className="form-group">
<label htmlFor="email">邮箱:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="请输入邮箱地址"
disabled={loading}
required
/>
</div>
{error && <div className="message error">{error}</div>}
{success && <div className="message success">{success}</div>}
<button
type="submit"
disabled={loading}
className="btn btn-primary"
>
{loading ? '创建中...' : '创建用户'}
</button>
</form>
</div>
);
};
export default UserForm;