@@ -182,47 +182,32 @@ import {useFormStatus} from 'react-dom';
182
182
export default function UsernameForm () {
183
183
const {pending , data } = useFormStatus ();
184
184
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
-
204
185
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} / >
208
189
< button type= " submit" disabled= {pending}>
209
- {pending ? ' Submitting... ' : ' Submit' }
190
+ Submit
210
191
< / 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>
215
195
);
216
196
}
217
197
` ` `
218
198
219
199
` ` ` js src/App.js
220
200
import UsernameForm from './UsernameForm';
221
201
import { submitForm } from "./actions.js";
202
+ import {useRef} from 'react';
222
203
223
204
export default function App() {
205
+ const ref = useRef(null);
224
206
return (
225
- < form action= {submitForm}>
207
+ <form ref={ref} action={async (formData) => {
208
+ await submitForm(formData);
209
+ ref.current.reset();
210
+ }}>
226
211
<UsernameForm />
227
212
</form>
228
213
);
@@ -231,8 +216,22 @@ export default function App() {
231
216
232
217
` ` ` js src/actions.js hidden
233
218
export 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;
235
233
}
234
+
236
235
` ` `
237
236
238
237
` ` ` json package.json hidden
0 commit comments