Cambiar / alterar el valor de la forma antes de enviar -- reactjs campo con react-admin camp Relacionados El problema

Change/altering the form value before submit


0
vote

problema

Español

Estamos usando react-admin REACT-ADMIN DOCS

Tengo un formulario con los campos productName, Price and Image . El campo de la imagen tiene un tipo de cadena, lo que significa cargar una imagen a S3 o cualquier otro destino y pasar la URL de imagen cargada para el campo de la imagen dinámicamente.

Tengo funcionalidad de trabajo para cargar la imagen a S3 y estoy obteniendo la URL de S3 ahora, el usuario llenará ProductName and Price Campos y presione Enviar. Y cuando el formulario envíe, quiero pasar la URL de la imagen también con otros campos.

arriba son mis requisitos que quiero lograr. Déjame explicarte lo que he probado.

Estoy siguiendo este enlace enlace .

ProductCreate.js

  export class ProductCreate extends Component{  render(){      return (         <Create {...this.props}>             <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">                                     <TextInput source="name" />                 <TextInput source="price"/>             </SimpleForm>         </Create>     ) } }   

En el código anterior, puede ver que he usado toolbar Props en SimpleForm6 con la barra de herramientas personalizada llamada PostCreateToolbar .

PostCreateToolbar.js

  const PostCreateToolbar = props => ( <Toolbar {...props}>     <SaveWithNoteButtonView         label="Save"         redirect="show"         submitOnEnter={false}         variant="contained"     /> </Toolbar> );   

productName, Price and Image0

  productName, Price and Image111  

En productName, Price and Image2 Archivo, puede ver la función Handleclick y cuando el usuario haga clic en el botón GUARDAR, esta función se llamará, pero 99887776613 no se llama. Cuando el usuario haga clic en el botón GUARDAR, puedo ver la primera consola, pero no la segunda que está dentro de productName, Price and Image4 . Puede ser que es el problema cuando la llamada API ocurre, no puedo enviar el campo productName, Price and Image5 .

Cualquier persona que tenga alguna otra forma de pasar los datos personalizados antes de enviar, estoy abierto para obtener idea.

Una forma más, pensé que está en forma de producto Puedo hacer que el campo ImageURL se deshabilite y cuando la imagen se cargue a S3 y obtenga la URL, luego, de alguna manera, rellene el campo ImageURL con el valor de ImageUrl. Entonces, cuando enviamos un valín de campo de Formulario ImageURL, pase a API. Si sabes cómo lograr esto, sería útil.

Original en ingles

We're using react-admin react-admin docs

I've got a form with fields productName, Price and Image. Image field has a string type, that means Upload an image to s3 or any other destination and pass uploaded image URL to image field dynamically.

I've working functionality for upload image to s3 and I'm getting s3 URL now the user will fill ProductName and Price fields and hit submit. and when the form submits I want to pass Image URL as well with other fields.

Above is my requirements that I want to achieve. Let me explain to you what I've tried.

I'm following this link link.

ProductCreate.js

export class ProductCreate extends Component{  render(){      return (         <Create {...this.props}>             <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">                                     <TextInput source="name" />                 <TextInput source="price"/>             </SimpleForm>         </Create>     ) } } 

In the above code, you can see I've used toolbar props on SimpleForm with custom toolbar called PostCreateToolbar.

PostCreateToolbar.js

const PostCreateToolbar = props => ( <Toolbar {...props}>     <SaveWithNoteButtonView         label="Save"         redirect="show"         submitOnEnter={false}         variant="contained"     /> </Toolbar> ); 

SaveWithNoteButtonView.js

class SaveWithNoteButtonView extends Component {      handleClick = () => {     const { basePath, handleSubmit, redirect } = this.props;      const form = useForm();      console.log("123", this.props);     return handleSubmit(values => {         console.log("456", this.props);         crudCreate('posts', { ...values, imageUrl: "https://s3.us-east-1.amazonaws.com/..." }, basePath, redirectTo);     }); };  render() {     const { handleSubmitWithRedirect, saveWithNote, ...props } = this.props;      return (         <SaveButton         handleSubmitWithRedirect={this.handleClick}         {...props}         />         );     } } 

In SaveWithNoteButtonView file, you can see I've handleClick function and when user click on save button this function will call but handleSubmit is not called. When user click on save button I can see first console but not second one that is within handleSubmit. May be that is the issue when API call happens I'm not able to send imageUrl field.

Anyone have any other way to pass the custom data before submit I'm open to get idea.

One more way, I thought is in product form I can make imageURL field disable and when image uploaded to s3 and get URL then somehow fill imageURL field with the imageURL value. so when we submit a form imageURL field value pass to api. If you know how to achieve this it'd be useful.

     

Lista de respuestas

0
 
vote

¿Por qué usas clase en lugar de funciones? expression ::= relation { and relation } | relation { or relation } | relation { xor relation } | relation [ nand relation ] | relation [ nor relation ] | relation { xnor relation } 0 es un gancho, y debe usarse dentro de los componentes funcionales.

Revisa su ejemplo de nuevo. expression ::= relation { and relation } | relation { or relation } | relation { xor relation } | relation [ nand relation ] | relation [ nor relation ] | relation { xnor relation } 1 maneja los datos del formulario. Pruebe Console.log (Formulario) con él, también, puede usar expression ::= relation { and relation } | relation { or relation } | relation { xor relation } | relation [ nand relation ] | relation [ nor relation ] | relation { xnor relation } 2 MÉTODO expression ::= relation { and relation } | relation { or relation } | relation { xor relation } | relation [ nand relation ] | relation [ nor relation ] | relation { xnor relation } 3 , para cambiar sus valores antes de enviarlo.

Su ejemplo funciona perfectamente si lo sigue en consecuencia. Trate de emular su código, y cambie solo el valor de la imagen que desea agregar. No debe estar usando crudcreate porque reacct-admin maneja el ahorro automáticamente.

 

Why do you use Class instead of Functions? useForm is a Hook, and must be used inside of functional components.

Check their example again. useForm handles the data of the form. Try console.log(form) with it, Also, you can use useForm method .change(), to change its values before submitting it.

Their example works perfectly if you follow it accordingly. Try to emulate their code, and change only the image value you want to add. You shouldn't be using CRUDcreate because react-admin handles the saving automatically.

 
 

Relacionados problema

14  Heroku Server se bloquea con "JavaScript Monthip Out of Memory" al desplegar la aplicación 'react-admin'  ( Heroku server crashes with javascript heap out of memory when deploying react ) 
Actualmente estoy desarrollando un panel de administración usando 'react-admin' que funciona bien en mi local, pero tan pronto como subo la aplicación a Herok...

0  No se puede acceder a la API desarrollada por rieles de react-admin  ( Cant access api developed by rails from react admin ) 
En la aplicación Rails, usando este archivo: config / inicializers / cors.rb Rails.application.config.middleware.insert_before 0, Rack::Cors do allow d...

1  React-Admin: Cambio de datos de recursos en la tienda sin solicitud HTTP  ( React admin changing resource data in store without http request ) 
Necesito modificar los datos de recursos en la tienda: State->admin->resources->Orders->data Pero sin llamar a la solicitud HTTP, como se muestra en la...

0  Reacty-admin: actualización de diseño de material  ( React admin material design update ) 
¿Cuánto esfuerzo sería actualizar el marco a los estándares de diseño de materiales más nuevos, por ejemplo, usados ​​en materiales-ui? Específicamente, estoy...

1  Usando reactive-admin, cómo crear un comentario de un post  ( Using react admin how to create a comment from a post ) 
Estoy usando reactivación para un nuevo proyecto. Uno de los desafíos que tengo correcto es crear algo como un comentario de un post . Aquí está la forma en ...

0  Diseño de pestañas para cada recurso  ( Tabbed layout for each resource ) 
Me gustaría cambiar el diseño para mis recursos, de modo que el nombre de página / recursos muestre una tarjeta con las pestañas "Lista", "Crear", "Editar". M...

0  ¿Alguna solución para deshabilitar el mensaje de advertencia roja en la página de inicio de sesión de reactivación?  ( Any workaround to disable the red warning message on the react admin login page ) 
Si vas aquí https://marmelab.com/REACT-ADMIN-DEMO Puede ver un mensaje de error en rojo en la parte inferior de la pantalla. Esta no es una experiencia ...

1  Reactive-administrador de búsqueda MULTI Seleccionar recuperación de la base de datos (Otra tabla)  ( React admin searchable multi select fetching from databaseother table ) 
Estoy usando react-admin para mi aplicación. Quiero crear una entrada de campo de selección de selección múltiple (sugerida con valores posibles) que obtien...

12  ¿Es posible tener múltiples datos de datos en reactivación?  ( Is it possible to have multiple dataproviders in react admin ) 
Si tengo múltiples extremos de API de descanso distintos (aplicaciones separadas haciendo cosas separadas), y quiero una aplicación única de UI (React-Admin-b...

1  React-admin selectinput no muestra el valor en la edición usando junto con las opciones  ( React admin selectinput does not show the value in edit using together with choi ) 
Tengo un campo de estado, viniendo de mi API. Tiene un valor entre 0-3. Mi respuesta se ve así: { status: 0 } Puedo mostrar el valor en la edición co...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos