帮我生成一个常见的登录表单，第一项是手机号，第二项是验证码，并且验证码输入框后面还要有一个获取验证码的按钮，按钮有一个点击事件可以发起一个fetch请求并且60秒只能触发一次，第三项是输入一个图形验证码，图形验证码是前端用js根据某一个4位的数字生成的，表单的最后一项是一个登录的按钮。这个需求帮我用react代码写出来，并且使用函数式组件

答：const LoginForm = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [captcha, setCaptcha] = useState('');
const [code, setCode] = useState('');
const [imgCode, setImgCode] = useState(''); const handleFetch = () => {
const num = Math.floor(Math.random() * 10000);
setCode(num);
} const handleImgCode = () => {
let code = '';
for (let i = 0; i < 4; i++) {
const randomNum = Math.floor(Math.random() * 10);
code += randomNum;
}
setImgCode(code);
} const handleSubmit = () => {
console.log('PhoneNumber', phoneNumber);
console.log('captcha', captcha);
console.log('code', code);
console.log('imgCode', imgCode);
} return (
<form>
<input type="text" placeholder="手机号" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
<input type="text" placeholder="验证码" value={captcha} onChange={(e) => setCaptcha(e.target.value)} />
<button type="button" onClick={() => handleFetch()}>获取验证码</button>
<input type="text" placeholder="图形验证码" value={imgCode} onChange={(e) => setImgCode(e.target.value)} />
<button type="button" onClick={() => handleImgCode()}>图形验证码</button>
<button type="button" onClick={() => handleSubmit()}>登录</button>
</form>
);
};