React useState：如何使用 onChange 输入和 OnClick 按钮更新我的 useState？

Posted 2023-03-08

【中文标题】React useState：如何使用 onChange 输入和 OnClick 按钮更新我的 useState？

【英文标题】：React useState: How can I update my useState with onChange for input and OnClick for the button?

【发布时间】：2020-12-06 20:07:30

【问题描述】：

我正在尝试更新 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>
  );

【问题讨论】：

当onChange 事件将使input 和filter 的值保持同步时，没有任何意义。您可以更新onChangeHandler 和onClickHandler 中的输入值，对输入字段的值做您想做的事情，例如：触发API 请求等。

【参考方案1】：

您可能希望这里有 2 个不同的状态，

持有当前过滤器的状态

保存当前用户输入的状态

点击按钮后，您希望将用户的输入与过滤器同步

看看你的代码，我想你已经明白了，所以只要让你的 userReq 成为一个状态就可以解决你的问题

基本上改变了这一点

 const userReq = 
    name: ''
  

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

到这里

  const [userReq, setUserReq] = useState( name: '' )

  function onChangeHandler (e) 
    setUserReq( name: e.target.value )
  ;

【参考方案2】：

您的 setFilter 错误，您正在使用：

setFilter(name: e.target.value)

应该是：

setFilter( name: e.target.value );

所以，下面的代码应该可以工作，你不需要'userReq' 变量：

function onChangeHandler(e) 
    setFilter( name: e.target.value );


const onClickHandler = (e) => 
   console.log(filter);
;

<input type="text" id="search" onChange=onChangeHandler />

如果你想要 onChange 内联：

onChange=(e) => setFilter( name: e.target.value )