React useState：如何使用onChange作为输入并使用OnClick作为按钮来更新useState？

问题描述

我正在尝试更新useState挂钩，但是对象返回空值。我尝试使用类似<input onChange={e => setFilter(name: e.target.value)} >的方法，但是它在每次击键时都会提交，并且按钮没有意义，并且用户无法完全完成该值（仅复制和粘贴有效）。我在做什么错了？

export default function Search() {
  const [filter,setFilter] = useState({ name: "Hungary" });
  const { data,loading,error } = useQuery(GET_COUNTRY_INFO,{
    variables: { filter },});

  if (loading) {
    return <Loader />;
  }
  if (error) return <p>Error</p>;

  const userReq = {
    name: ''
  }


  function onChangeHandler (e) {
    const userReq = {name: e.target.value}
    return userReq
  };

  const onClickHandler = (e) => {
    setFilter(userReq)
  } 

  return (
    <div className="body">
      <h1>
        Get Information
        <br /> about Countries!
      </h1>
      <div className="wrapper">
          <input
            className="search"
            type="text"
            id="search"
            placeholder="Enter a Country"
            onChange={onChangeHandler}
          />

          <button className="submit" name="name" type="submit" onClick={onClickHandler}>
            Search
          </button>

        {data?.Country?.[0] && <CountryInfo country={data?.Country[0]} />}
      </div>
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）