Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 表单一旦更改工作,但当我将其更改为onSubmit时却无法工作?_Javascript_Reactjs - Fatal编程技术网

Javascript 表单一旦更改工作,但当我将其更改为onSubmit时却无法工作?

Javascript 表单一旦更改工作,但当我将其更改为onSubmit时却无法工作?,javascript,reactjs,Javascript,Reactjs,我一直在努力想办法解决这个问题。出于某种原因,当inputs onSubmit设置为onChange时,它会正确触发。但是我需要它被提交,因为我不希望它在每一次改变中都被激发。是否有人知道我做错了什么,以及onSubmit为什么没有为输入工作。我正在尝试设置状态并更新URL查询,例如: “website.com/browse?country={text from input}” const[countryQuery,setCountryQuery]=useQueryState(“国家”,“国家”

我一直在努力想办法解决这个问题。出于某种原因,当inputs onSubmit设置为onChange时,它会正确触发。但是我需要它被提交,因为我不希望它在每一次改变中都被激发。是否有人知道我做错了什么,以及onSubmit为什么没有为输入工作。我正在尝试设置状态并更新URL查询,例如:

“website.com/browse?country={text from input}”

const[countryQuery,setCountryQuery]=useQueryState(“国家”,“国家”)
const handleSubmitCountry=(e)=>{
e、 预防默认值()
setCountryQuery()
}
setCountryQuery(e.target.value)}
/>      

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

不要将任何事件处理程序附加到输入元素以使其成为不受控制的输入,添加按钮/输入以触发表单
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>
const handleSubmitCountry=e=>{
e、 预防默认值();
const countryQuery=e.target.countryQuery.value;
//立即使用countryQuery
countryQuery&&alert(`SubmittedCountryQuery:${countryQuery}`);
};
...
提交

通过
onChange={e=>setCountryQuery(e.target.value)}
更改这个
onSubmit={e=>setCountryQuery(e.target.value)}
这样表单中就有了一个输入按钮,我想一旦单击submit按钮,就会有一个submit按钮,只有handleSubmitCountry才会触发,这就是你要找的吗?我不认为input有onSubmit道具。也许使用onBlur可以解决您的问题。嗯,好的,谢谢。但是如何从handleSubmitCountry中获取类型输入的值呢?
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>