当按下返回表单字段时避免返回页面

Question

我想避免，当我在表单中填写一个字段时，如果我按返回键，页面将返回到前一页。

我希望当我按返回键时，什么都不会发生，或者转到下一个字段。

这是我表格的代码：

在返回中的反应性功能组件中，我有：

  <Form
        onSubmit={onSubmit}
        render={({ handleSubmit, values }) => (
          <form id='createForm' className="row mt-4" onSubmit={handleSubmit} >
            <div className="col-md-1 mb-4">
              <label htmlFor="inputDescription" className="form-label text-center">
                <h5> Título </h5>
              </label>
            </div>
            <div className="col-md-11">
              <Field
                className="form-control"
                type="text"
                name='title'
                component="input"
              // required
              />
            </div>

            <div className="col-md-1 mb-4">
              <label htmlFor="inputResponse" className="form-label text-center" >
                <h5> Texto </h5>
              </label>
            </div>
            <div className="col-md-11">
              <Field
                className="form-control"
                type="textarea"
                name='text'
                component="input"
              // required
              />
            </div>
            <div className="col-md-1 mb-4">
              <label htmlFor="link" className="form-label text-center" >
                <h5> Enlace </h5>
              </label>
            </div>
            <div className="col-md-5">
              <Field
                className="form-control"
                type="link"
                name="link"
                component="input"
              // required
              />
            </div>
            <div className="col-md-1 mt-1">
              <label htmlFor="link_title" className="form-label text-center" >
                <h5> Título Enlace </h5>
              </label>
            </div>
            <div className="col-md-5">
              <Field
                className="form-control"
                type="text"
                name='link_title'
                component="input"
              // required
              />
            </div>              
            
            
            <div className="buttons text-center mt-2">
              <Volver className={"btn btn-outline-danger me-5 mb-3"} prevStep={prevStep} step={2} />                 
              <button className="btn btn-outline-warning me-5 mb-3" onClick={(e) => (e.preventDefault(), openPreview(values))} >Vista Previa</button>
              <SaveAndEdit className={"btn btn-outline-success me-5 mb-3"} idForm={'createForm'} text={'Guardar Respuesta'} />                  
              <Cancelar className={"btn btn-outline-dark  me-5 mb-3"} />
            </div>               
          </form>

Answer 1

默认情况下，表单提交会触发整个页面刷新，因为这些内容可以追溯到AJAX调用或动态内容出现之前。

防止这种情况的一个简单方法是让您的onSubmit函数返回false，这将防止这种行为。

另一种方法是捕获提交事件对象并在其上调用.preventDefault()。

第三，根本不使用表单submit处理程序。相反，将yout onSubmit函数附加到保存按钮的单击事件。

从这一行中删除onsubmit={handleSubmit}：

<form id='createForm' className="row mt-4" onSubmit={handleSubmit}>

相反，...and将其附加到单击事件中，用户将单击该事件以提交表单。如果您使用的是普通按钮，则如下所示：

<button onClick={handleSubmit} idForm={'createForm'}>Guardar Respuesta</button>

...or，您可以像处理任何其他回调属性一样，从SaveAndEdit组件中处理该回调函数。