如果遇到错误，防止 bootstrap 提交按钮清空表单

Question

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

考虑以下片段：

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

该代码段的问题在于，当按钮被声明为 submit 时，它会自动重新加载页面并清空表单，或者我想之前处理一些错误并仅在以下情况下执行所有这些操作没有错误。

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

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

Answer 1

将 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...')
}

Answer 2

简答：

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

长答案：

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

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

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

e.stopPropagation();

如果遇到错误，防止 bootstrap 提交按钮清空表单

prevent bootstrap submit button emptying form if error encounterred

reactjs

react-bootstrap

bootstrap-5

简答：

长答案：