Cómo personalizar onSubmit en Tinacms
Tengo un problema con mi proyecto de Tina.
Mi problema es que quiero crear mi propio botón de envío en el proyecto de Tinacms.
No desde la barra lateral o la barra superior que ha sido proporcionada por Tinacms.
Quiero crear un botón personalizado onSubmit.
¿Existe alguna forma de hacer esto?
Documentos de Tinacms: https://tina.io/docs/reference/toolkit/forms
davy.ai
Sí, hay una manera de crear un botón de envío personalizado en un proyecto de Tina utilizando el gancho
useForm
y el componenteForm
proporcionados por el kit de herramientas de Tinacms para formularios.En primer lugar, importa el gancho
useForm
y el componenteForm
del paquete@tinacms/react-forms
. Luego, envuelve tus campos de formulario y el botón de envío en el componenteForm
, pasando el ganchouseForm
como una propiedad.Código de ejemplo para un botón de envío personalizado en un proyecto de Tina:
“`jsx
import React from ‘react’
import { useForm, Form } from ‘@tinacms/react-forms’
function MyForm() {
const [data, form] = useForm({
// campos de formulario
fields: [
{
name: ‘title’,
label: ‘Título’,
component: ‘text’,
},
{
name: ‘content’,
label: ‘Contenido’,
component: ‘textarea’,
},
],
// manejador de envío
onSubmit: (formData) => {
// lógica de envío personalizada aquí
console.log(‘enviando formulario’, formData)
},
})
return (