35 lines
1014 B
TypeScript
35 lines
1014 B
TypeScript
'use client'
|
|
|
|
import { signup } from '@/app/lib/actions'
|
|
import { useFormState, useFormStatus } from 'react-dom'
|
|
|
|
export default function Page() {
|
|
const [errorMessage, dispatch] = useFormState(signup, undefined)
|
|
|
|
console.log(errorMessage, '=== in client');
|
|
return (
|
|
<form action={dispatch}>
|
|
<input name="username" required />
|
|
<input type="password" name="password" placeholder='密码' required />
|
|
<input type="password" name="confirm_password" placeholder='确认密码' required />
|
|
<div>{errorMessage && <p>{errorMessage}</p>}</div>
|
|
<LoginButton />
|
|
</form>
|
|
)
|
|
}
|
|
|
|
function LoginButton() {
|
|
const { pending } = useFormStatus()
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
if (pending) {
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button aria-disabled={pending} type="submit" onClick={handleClick}>
|
|
Login {pending}
|
|
</button>
|
|
)
|
|
} |