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

Question

我正在使用引导程序和 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 function 添加event （ e ）参数并调用 function preventDefault （防止刷新）：

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

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

Answer 2

简短的回答：

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

长答案：

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

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

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

e.stopPropagation();