分享
三行代码  ›  专栏  ›  技术社区  ›  unicorn_surprise

表单onChange working,但是当我将其更改为onSubmit时失败?

  •  0
  • unicorn_surprise  · 技术社区  · 2 天前

    “website.com/browse?country={来自输入的文本}”

    const [countryQuery, setCountryQuery] = useQueryState("country", "")
    
    const handleSubmitCountry = (e) => {
        e.preventDefault()
        setCountryQuery()
    }
    
    <form onSubmit={handleSubmitCountry}>
        <input 
            placeholder={countryQuery}
            type="text" 
            className={styles.searchInput}
            onSubmit={e => setCountryQuery(e.target.value)} 
        />      
    </form>
    
    1 回复  |  直到 2 天前
        1
  •  1
  •   Drew Reese    2 天前

    您需要从表单的 onSubmit 使用输入名称的处理程序中的事件。

    提交 处理程序。

    const handleSubmitCountry = e => {
      e.preventDefault();
      const countryQuery = e.target.countryQuery.value;
      // use countryQuery now
      countryQuery && alert(`Submitted Country Query: ${countryQuery}`);
    };
    
    ...
    <form onSubmit={handleSubmitCountry}>
      <input name="countryQuery" type="text" />
      <button type="submit">Submit</button>
    </form>
    

    Edit intelligent-cloud-6e0y9