提交表单时更改并从 useActionData() 获取实时更新的内容。

huangapple
go评论99阅读模式
英文:

Remix submit form onChange and get live update from useActionData()

问题

I am trying to create a remix page where i want to get live preview when i change a Select tag. It is going through a Form since i want it to translate the data.

A solution to my problem could be to make preventDefault(first code example) to work or to find a way to make useActionData()(second code example) to work when using useFetcher.

With this code, the preventDefault does not work. I need preventDefault to work so that the selector doesn't reset. I could make the action function also send the name so that the DefaultValue in select is imported from action function, but this is going to become a big form and i dont want to refresh the whole page.

英文:

I am trying to create a remix page where i want to get live preview when i change a Select tag. It is going through a Form since i want it to translate the data.

A solution to my problem could be to make preventDefault(first code example) to work or to find a way to make useActionData()(second code example) to work when using useFetcher

With this code, the preventDefault does not work. I need preventDefault to work so that the selector doesn't reset. I could make the action function also send the name so that the DefaultValue in select is imported from action function, but this is going to become a big form and i dont want to refresh the whole page.

  1. export async function action({ request }: ActionArgs) {
  2.     const form = new URLSearchParams(await request.text())
  3.     const name = form.get('name');
  4.     console.log('name', name);
  5.     return json({ message: name ? `Hello ${name}!` : 'Select name' });
  6. }
  8. export default function Page() {
  9.     const actionData = useActionData();
  10.     console.log('actionData', actionData);
  12.     return (
  13.         <>
  14.             <Form method="post">
  16.                 <h1>{actionData ? actionData.message : 'Select name.'}</h1>
  18.                 <select 
  19.                     name="name" 
  20.                     onChange={e => {
  21.                         e.preventDefault();
  22.                         e.target.form.submit();
  23.                     }}
  24.                 >
  25.                     <option value="name 1">Name 1</option>
  26.                     <option value="name 2">Name 2</option>
  27.                     <option value="name 3">Name 3</option>
  28.                 </select>
  30.                 <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
  31.                     Submit
  32.                 </button>
  34.                 </Form>
  35.         </>
  36.     );
  37. }

I have also tried following https://github.com/remix-run/remix/issues/1807 using useRef and useFetcher, but even tho the action function runs, it gives me undefined when logging actionData.

  1. export async function action({ request }: ActionArgs) {
  2.     const form = new URLSearchParams(await request.text())
  3.     const name = form.get('name');
  4.     console.log('name', name);
  5.     return json({ message: name ? `Hello ${name}!` : 'Select name' });
  6. }
  8. export default function Page() {
  9.     const actionData = useActionData();
  10.     console.log('actionData', actionData); // Gives undefined
  12.     const formRef = useRef<HTMLFormElement>(null);
  13.     const fetcher = useFetcher();
  15.     return (
  16.         <>
  17.             <fetcher.Form method="post" ref={formRef}>
  19.                 <h1>{actionData ? actionData.message : 'Select name.'}</h1>
  21.                 <select 
  22.                     name="name" 
  23.                     onChange={() => {
  24.                         fetcher.submit(formRef.current);
  25.                     }}
  26.                 >
  27.                     <option value="name 1">Name 1</option>
  28.                     <option value="name 2">Name 2</option>
  29.                     <option value="name 3">Name 3</option>
  30.                 </select>
  32.                 <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
  33.                     Submit
  34.                 </button>
  36.             </fetcher.Form >
  37.         </>
  38.     );
  39. }

答案1

得分: 0

以下是您要翻译的内容：

Main file test.tsx:

  1. import { useFetcher } from '@remix-run/react';
  3. export default function Page() {
  4.     const fetcher = useFetcher();
  5.     return (
  6.         <>
  7.             <div>
  8.                 <h1>{fetcher.data ? fetcher.data.message : 'Select name.'}</h1>
  10.                 <select
  11.                     name="name"
  12.                     onChange={e => {
  13.                         fetcher.load(`loader/?name=${e.target.value}`);
  14.                     }} 
  15.                 >
  16.                     <option value="name 1">Name 1</option>
  17.                     <option value="name 2">Name 2</option>
  18.                     <option value="name 3">Name 3</option>
  19.                 </select>
  21.                 <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
  22.                     Submit
  23.                 </button>
  24.             </div>
  25.         </>
  26.     );
  27. }

Loaderfile loader.ts:

  1. import type { LoaderArgs } from '@remix-run/node';
  2. import { json } from '@remix-run/node';
  4. export async function loader({ request }: LoaderArgs) {
  5.     const form = new URLSearchParams(await request.text());
  6.     const name = form.get('name');
  7.     return json({ message: name ? `Hello ${name}!` : 'Select name' });
  8. }

请注意，我已经移除了代码部分并返回了翻译好的内容。

英文:

I found a solution, it was to use fetcher.load, and then have it as a own loader file.

Main file test.tsx:

  1. import { useFetcher } from &#39;@remix-run/react&#39;;
  3. export default function Page() {
  4.     const fetcher = useFetcher();
  5. 	return (
  6. 		&lt;&gt;
  7. 			&lt;div&gt;
  8. 				&lt;h1&gt;{fetcher.data ? fetcher.data.message : &#39;Select name.&#39;}&lt;/h1&gt;
  10. 				&lt;select
  11. 					name=&quot;name&quot;
  12. 					onChange={e =&gt; {
  13. 						fetcher.load(`loader/?name=${e.target.value}`);
  14. 					}} 
  15. 				&gt;
  16. 					&lt;option value=&quot;name 1&quot;&gt;Name 1&lt;/option&gt;
  17. 					&lt;option value=&quot;name 2&quot;&gt;Name 2&lt;/option&gt;
  18. 					&lt;option value=&quot;name 3&quot;&gt;Name 3&lt;/option&gt;
  19. 				&lt;/select&gt;
  21. 				&lt;button type=&quot;submit&quot; className=&quot;bg-blue-500 text-white font-bold py-2 px-4&quot;&gt;
  22. 					Submit
  23. 				&lt;/button&gt;
  24. 			&lt;/div&gt;
  25. 		&lt;/&gt;
  26. 	);
  27. }

Loaderfile loader.ts:

  1. import type { LoaderArgs } from &#39;@remix-run/node&#39;;
  2. import { json } from &#39;@remix-run/node&#39;;
  4. export async function loader({ request }: LoaderArgs) {
  5. 	const form = new URLSearchParams(await request.text());
  6. 	const name = form.get(&#39;name&#39;);
  7. 	return json({ message: name ? `Hello ${name}!` : &#39;Select name&#39; });
  8. }

huangapple
  • 本文由 发表于 2023年4月6日 19:55:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/75949231.html
  • action
  • forms
  • onchange
  • reactjs
  • remix
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定