如果遇到錯誤，防止引導提交按鈕清空表單

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();