[英]prevent bootstrap submit button emptying form if error encounterred
I am using bootstrap and reactJS and want to build a form.我正在使用引导程序和 reactJS 并想构建一个表单。
Consider the following snippet:考虑以下代码段:
const CustomForm = () => {
const [alertText, setAlertText] = ('')
const [username, setUsername] = ('');
const handle_submit = () => {
//treat some possible error
setAlertText('some warnings...')
}
return (
<Form>
{alertText && <Alert className='mb-3' variant="warning" >
{alertText}
</Alert>}
<FormGroup className="mb-3">
<FloatingLabel label='username'>
<Form.Control type='text' name='username' placeholder='username' onChange={e => setUsername(e.target.value)} value={username} />
</FloatingLabel>
</FormGroup>
<Button className='float-end' type='submit' variant='outline-primary' onClick={handle_submit} >Submit</Button>
</Form>
)
}
the problem with that snippet is that when the button is declared as submit
, it auto reloads the page and empties the form, or I would like to handle some error before and do all that stuff only if the are no errors.该片段的问题在于,当按钮被声明为
submit
时,它会自动重新加载页面并清空表单,或者我想在之前处理一些错误,并且只有在没有错误的情况下才执行所有这些操作。
If I declare the type as button
, it works well, but I am a little bit confused.如果我将类型声明为
button
,它工作得很好,但我有点困惑。 I would like to use the submit
attribute;我想使用
submit
属性; I think it is more appropriate.我觉得比较合适。
So my first question is, I am right to think that?所以我的第一个问题是,我这样想是对的吗? and the second is, what do I need to change empty the form only if there are no errors?
第二个是,只有在没有错误的情况下,我才需要将表单更改为空?
Add the onSubmit
prop to Form
:将
onSubmit
道具添加到Form
:
<Form onSubmit={handle_submit}>
and in the handle_submit
function add the event
( e
) argument and call the function preventDefault
(prevents refresh):并在
handle_submit
function 添加event
( e
)参数并调用 function preventDefault
(防止刷新):
const handle_submit = (e) => {
// Prevent refresh
e.preventDefault();
//treat some possible error
setAlertText('some warnings...')
}
type='button'
is more appropriate in your case. type='button'
更适合您的情况。
As per MDN Documentation , a button will have by default a type of submit
.根据MDN 文档,默认情况下按钮将具有一种
submit
类型。 If the type is submit
, once clicked, it will submit the request to the server.如果类型是
submit
,点击后会将请求提交给服务器。 If the form the submit button is a part of has action
property defined, the POST
request will be sent to that uri, otherwise it will be sent to the current uri.如果提交按钮所在的表单定义了
action
属性,则POST
请求将发送到该 uri,否则将发送到当前 uri。 In your case it will trigger a page redirect to the same page, and that is the reason why your form is reset.在您的情况下,它将触发页面重定向到同一页面,这就是您的表单被重置的原因。
Since you have an event listener attached to the button, and you want to process the event client-side to later sent XHR(AJAX) request, you don't want the button to trigger the request to server.由于您有一个附加到按钮的事件侦听器,并且您希望处理事件客户端以稍后发送 XHR(AJAX) 请求,因此您不希望按钮触发对服务器的请求。 Thus you can safely set it to
type='button'
.因此,您可以安全地将其设置为
type='button'
。
If for some reason you still need to keep type='submit'
, you can stop the submit
to further propagate in your onClick
event handler using:如果由于某种原因您仍然需要保留
type='submit'
,您可以使用以下命令停止submit
以在onClick
事件处理程序中进一步传播:
e.stopPropagation();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.