Tengo un componente dataModal que tiene dos cuadros de texto, una tabla de datos de búsqueda y un botón de envío. Los cuadros de texto Name y Date deben completarse manualmente, y la tabla de datos es un componente que se puede buscar a través de sus propios cuadros de texto para reducir los datos que se deben ingresar.

El problema al que me enfrento es cuando busco en la tabla de datos utilizando los campos de entrada de texto y al presionar Intro se envía el formulario. Es probable que esto suceda porque la tabla de datos tiene el formato en el que se encuentra el botón de envío.

¿Hay alguna manera de que los campos de texto en la tabla de datos no envíen el formulario y retengan la capacidad de enviar el formulario al presionar Intro en el formulario de nombre o fecha?

 const dataModal = (props) => { const { data, save, close } = props; const [name, setName] = useState(); const [date, setDate] = useState(); const handleSubmit = (e) => { if (e) e.preventDefault(); save(name, date); // DB Call from parent close(); // Closes the modal } return ( <form onSubmit={handleSubmit}> <customInput name="NameTextField" captureInput={(value) => {setName(value)}} /> // Custom text box component <customInput name="DateTextField" captureInput={(value) => {setDate(value)}} /> // Custom text box component <searchableDataTable name="SearchableDataTable" data=data /> // Data Table with customInputs build the same as above that are used for filtering the data table <Button type="submit" /> // Submission button </form> ) }

Mover la tabla de datos debajo de las pestañas del form funciona, pero provoca una representación "fea" en la que el botón Enviar está en el medio del modal, y no en la parte inferior. Esta es la solución alternativa si no puedo resolver esto.