Javascript 如何使用带有输入 onChange 和按钮 onClick 事件的 reactrouter useSubmit 钩子

我正在try 使用Reaction路由中的useSubmit钩子创建一个带有清除按钮的搜索栏.搜索查询应在输入更改和点击按钮时提交.

SearchBar.tsx

import { Form, useSubmit } from 'react-router-dom';
import { ChangeEvent, useState } from 'react';

export default function SearchBar({ query }: { query?: string }) {
  const submit = useSubmit();
  const [q, setQ] = useState(query ?? '');

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setQ(event.target.value);
    submitForm(event.currentTarget.form);
  }

  function handleClear(event: any) {
    setQ('');
    submitForm(event.currentTarget.form);
  }

  function submitForm(submitTarget: any) {
    const isFirstSearch = q == null;
    submit(submitTarget, {
      replace: !isFirstSearch,
    });
  }

  return (
    <Form role="search">
      <input
        type="search"
        name="q"
        value={q}
        onChange={handleChange}
        autoComplete="off"
      />
      {q && q.length > 0 && (
        <button type="button" onClick={handleClear}>
          Clear
        </button>
      )}
    </Form>
  );
}

所有人.多伦多证券交易所.

import { getTodos } from '../todos';
import { useLoaderData } from 'react-router-dom';
import SearchBar from '../SearchBar';

export async function loader({ request }: { request: Request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get('q');
  const todos = await getTodos(q);
  return { todos, q };
}

export default function Todos() {
  const { todos, q }: any = useLoaderData();

  return (
    <div>
      <SearchBar query={q} />
      <div>
        {todos.length > 0 ? (
          todos.map((todo: any) => <div key={todo.id}>{todo.text}</div>)
        ) : (
          <p>No todos</p>
        )}
      </div>
    </div>
  );
}

当我单击Clear按钮时，输入将被清除，但提交的查询仍具有以前的值.

StackBlitz个