当您点击搜索按钮时，如何更新React组件？

Question

我刚接触React和JavaScript，正在尝试访问一个公共API。我有以下函数：

import { useState } from "react";
import CountrySWR from "./CountrySWR";


export default function SearchForm(){
    const [countryName, setCountryName] = useState("a");

    function handleSubmit(e) {
        e.preventDefault();

        const query = e.target("query");
        setCountryName(query);
    }

    return (
        <>
            
                
                
            
            
        
    );
};

而CountrySWR.js看起来像这样：

import useSWR from "swr";
import { useState } from "react";


const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function CountrySWR({name}){

    const url = "https://restcountries.com/v3.1/name/" + name;

    const {
        data : countries,
        error,
        isLoading,
    } = useSWR(url, fetcher);


    if(error) return 数据加载失败;
    if(isLoading) return 加载中，请稍候...

    if(length > 1){
        txt = name + '的领土';
    }


    return(
        
            {txt}
            {countries &&
                countries.map((country, index) => (
                    
                        {country.name.common}
                        人口: {country.population.toLocaleString('en-US')}
                        {country.name.special !==  null ? {country.name.special}
 : {country.name}}

                        

                    
                ))}
        
    );

}

我在App.js中这样调用它：

<>
  ...

页面最初加载时显示了一列CountrySWR元素，但当我点击搜索按钮后，出现以下错误：

Uncaught TypeError: e.target is not a function
    at handleSubmit (SearchForm.js:13:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1).....

我需要做什么来修复这个问题，以便在按下搜索按钮时更新？

jAndy · Answer

推荐的做法是使用状态变量来控制输入框的值。

const [query, setQuery] = useState(''); // 声明一个状态变量...
// ...
return (
   setQuery(e.target.value)} // ...并在进行任何编辑时更新状态变量
  />
);

在这种情况下，你可以在提交时将国家名称的状态更新为查询的值。

function handleSubmit(e) {
  e.preventDefault();
  setCountryName(query);
}

Ian Roberts · Answer

修改你的查询代码，写作：

const query = e.target.value;

代替原来的：

const query = e.target("query");

Vincent Ramdhanie · Answer

看起来你的代码里有一个小错误。你应该根据你想定位的表单元素的名称或ID来调用e.target，而不是字符串"query"。此外，你应该使用e.target.value来获取输入字段的值。这是你的代码的一个修正版本：

const handleSubmit = (e: any) => {
    e.preventDefault();
    // 这里假设query是你位于表单中的输入元素的ID
    console.log(e.target.elements.query.value);
}

Justin · Answer

我已经将handleSubmit函数修改为：

function handleSubmit(e) {
    e.preventDefault();

    const query = e.target.query.value;        
    setCountryName(query);

}

现在我得到了预期的结果。