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