为什么我的输入没有重置？ {react-router-dom}

Question

我目前正在努力让重置按钮有效地重置搜索功能。虽然按钮本身按预期工作，但我遇到了文本输入字段不会随之重置的问题。奇怪的是，“query”、“searchText”和“inputValue”似乎都保留了它们的值，而且我也在努力寻找重置它们的解决方案。任何有关解决此问题的帮助将不胜感激。谢谢！

//This is my reset function
const onResetSearch = () => {
    event.preventDefault();
   setBusco(false);
   setSearchParams({});
   console.log(query, searchText, inputValue);
   onResetForm();
   navigate("/search")}

const [searchParams, setSearchParams] = useSearchParams(); //esto se hace asi nomas
const query = useMemo(() => searchParams.get("q"), [searchParams.get("q")]); 
const heroes = useMemo(() => (query ? getHeroesByName(query) : []), [query]); 
const { searchText, onInputChange, onResetForm } = useForm({searchText: query || ""});

const inputValue = searchText.trim();
const onSearchSubmit = (event) => {
event.preventDefault();
if (inputValue.length < 1 || !inputValue) return;
setSearchParams({ q: inputValue });};

<button onClick={onResetSearch}}
className="btn btn-outline-danger mt-2">Reset</button>

当我搜索某些内容时() 当我按下重置按钮时 () 你可以看到超人还在输入中

Answer 1

您的代码有点混乱，看起来您复制并粘贴了代码的一些片段，因为您的代码有很多问题。

我想看看 useSearchParams() 是如何定义的。你想在这里使用反应钩子吗？为什么这些变量没有从 useState() 中解构？状态是我们触发页面渲染的方式，因此这可能会导致您的问题。

const [searchParams, setSearchParams] = useSearchParams();

查看输入字段的 JSX 也会很有帮助。重置字段应该像这样简单：

<button onClick={() => setMyTextField("")} />