@@ -182,47 +182,32 @@ import {useFormStatus} from 'react-dom';
182182export default function UsernameForm () {
183183 const {pending , data } = useFormStatus ();
184184
185- const [showSubmitted , setShowSubmitted ] = useState (false );
186- const submittedUsername = useRef (null );
187- const timeoutId = useRef (null );
188-
189- useMemo (() => {
190- if (pending) {
191- submittedUsername .current = data? .get (' username' );
192- if (timeoutId .current != null ) {
193- clearTimeout (timeoutId .current );
194- }
195-
196- timeoutId .current = setTimeout (() => {
197- timeoutId .current = null ;
198- setShowSubmitted (false );
199- }, 2000 );
200- setShowSubmitted (true );
201- }
202- }, [pending, data]);
203-
204185 return (
205- <>
206- < label > Request a Username: < / label >< br / >
207- < input type= " text" name= " username" / >
186+ < div >
187+ < h3 > Request a Username: < / h3 >
188+ < input type= " text" name= " username" disabled = {pending} / >
208189 < button type= " submit" disabled= {pending}>
209- {pending ? ' Submitting... ' : ' Submit' }
190+ Submit
210191 < / button>
211- {showSubmitted ? (
212- < p> Submitted request for username: {submittedUsername .current }< / p>
213- ) : null }
214- < / >
192+ < br / >
193+ < p> {data ? ` Requesting ${ data? .get (" username" )}... ` : ''}</p>
194+ </div>
215195 );
216196}
217197` ` `
218198
219199` ` ` js src/App.js
220200import UsernameForm from './UsernameForm';
221201import { submitForm } from "./actions.js";
202+ import {useRef} from 'react';
222203
223204export default function App() {
205+ const ref = useRef(null);
224206 return (
225- < form action= {submitForm}>
207+ <form ref={ref} action={async (formData) => {
208+ await submitForm(formData);
209+ ref.current.reset();
210+ }}>
226211 <UsernameForm />
227212 </form>
228213 );
@@ -231,8 +216,22 @@ export default function App() {
231216
232217` ` ` js src/actions.js hidden
233218export async function submitForm(query) {
234- await new Promise ((res ) => setTimeout (res, 1000 ));
219+ await new Promise((res) => setTimeout(res, 2000));
220+ }
221+ ` ` `
222+
223+ ` ` ` css
224+ p {
225+ height: 14px;
226+ padding: 0;
227+ margin: 2px 0 0 0 ;
228+ font-size: 14px
229+ }
230+
231+ button {
232+ margin-left: 2px;
235233}
234+
236235` ` `
237236
238237` ` ` json package.json hidden
0 commit comments