0

estoy complicado con un formulario realizado con react hook form y no se como solucionarlo, tengo un input con un boton de agregar type="button" y al agregar se muestra en un div, pero al estar en el formulario al presionar ENTER se envia todos los datos del formulario, dandome error si los campos estan vacios (por las validaciones de register). Mi idea es que al estar posicionado en el input y presionar enter se guarda la info tipeada y no que se envie el formulario completo.

[![https://i.sstatic.net/I8Y6E.jpg][1]][1]

esto es el componente tagsInput:

        <>
            <div className="form-control container-tags">
                {tags.map((tag, index) => (
                    <div key={index} className="tag-item">
                        <span className="tag-text">{tag}</span>
                        <span className="tag-closed" onClick={() => removeTag(index)}>
                            &times;
                        </span>
                    </div>
                ))}
            </div>
            <div className='tags-input-container'>
                <input
                    onChange={(e) => handleKeyDown(e)}
                    onKeyDown={(e) => handleKeyEnter(e.key)}
                    type="text"
                    name={name}
                    value={text}
                    placeholder="Ingrese... "
                    className={"tags-input"}
                />
                <button
                    name={name}
                    type="button"
                    className='btn btn-success'
                    onClick={() => saveTags()}>Agregar</button>
            </div>

        </>
    ) ```


  [1]: https://i.sstatic.net/I8Y6E.jpg

1 respuesta 1

0

Tienes que crear una función onSubmit en el formulario.

    Const NoRecargar = (event) =>{
    event.preventDefault();

   }

y en el form algo asi

<form onSubmit='NoRecargar'>
            <div className="form-control container-tags">
                {tags.map((tag, index) => (
                    <div key={index} className="tag-item">
                        <span className="tag-text">{tag}</span>
                        <span className="tag-closed" onClick={() => removeTag(index)}>
                            &times;
                        </span>
                    </div>
                ))}
            </div>
            <div className='tags-input-container'>
                <input
                    onChange={(e) => handleKeyDown(e)}
                    onKeyDown={(e) => handleKeyEnter(e.key)}
                    type="text"
                    name={name}
                    value={text}
                    placeholder="Ingrese... "
                    className={"tags-input"}
                />
                <button
                    name={name}
                    type="button"
                    className='btn btn-success'
                    onClick={() => saveTags()}>Agregar</button>
            </div>
</form>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.