如果遇到错误，防止引导提交按钮清空表单答案

【问题标题】：prevent bootstrap submit button emptying form if error encounterred如果遇到错误，防止引导提交按钮清空表单
【发布时间】：2021-12-29 07:19:32
【问题描述】：

我正在使用 bootstrap 和 reactJS 并想构建一个表单。

考虑以下 sn-p：

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>
    )
}

该 sn-p 的问题在于，当按钮被声明为 submit 时，它会自动重新加载页面并清空表单，或者我想在之前处理一些错误，并且只有在没有错误。

如果我将类型声明为button，它工作得很好，但我有点困惑。我想使用submit 属性；我觉得比较合适。

所以我的第一个问题是，我这样认为是对的吗？第二个是，只有在没有错误的情况下，我才需要将表单更改为空？

【问题讨论】：

标签： reactjs react-bootstrap bootstrap-5

【解决方案1】：

简答：

type='button' 更适合您的情况。

长答案：

根据MDN Documentation，默认情况下按钮的类型为submit。如果类型为submit，点击后会向服务器提交请求。如果提交按钮所在的表单定义了action 属性，则POST 请求将发送到该uri，否则将发送到当前uri。在您的情况下，它将触发页面重定向到同一页面，这就是您的表单被重置的原因。

由于您在按钮上附加了一个事件侦听器，并且您希望在客户端处理事件以稍后发送 XHR(AJAX) 请求，因此您不希望按钮触发对服务器的请求。因此，您可以安全地将其设置为type='button'。

如果由于某种原因您仍需要保留 type='submit'，您可以使用以下命令停止 submit 以在您的 onClick 事件处理程序中进一步传播：

e.stopPropagation();

【讨论】：

【解决方案2】：

将onSubmit 属性添加到Form：

<Form onSubmit={handle_submit}>

并在handle_submit 函数中添加event (e) 参数并调用函数preventDefault（防止刷新）：

 const handle_submit = (e) => {
        // Prevent refresh
        e.preventDefault();

        //treat some possible error
        setAlertText('some warnings...')
}

【讨论】：