Assume I have a shiny new React component for rendering markdown and ye old legacy static HTML form, where user types text into textarea
Now I want to enhance this form a little: I want to display my React component alongside and render markdown as user types.
So, basically, I need to set component's props from HTML.
Next thing
Assume I have a React component that displays set of pics and lets user to click and mark one as active. It draws a fancy blue border around the active image and everyone are happy.
Now I have ye old HTML form and I want to send selected picture's id to my server.
So, basically, I need to read component's props (or state) and put it in the hidden field of the form
How do I achieve this? I also might have multiple separate components on my page
Related
We are planning to build a dynamic frontend where users (admin specifically) can create UI components with something simple like a button click without changing the code.
For example:-
I have a form where I have 2 inputs username and email and there's a button to add more input fields and whenever the admin clicks on that button it displays another form where you can enter info such as type, label, name of the input field to be added and it then it displays it on the DOM.
But he also wants to persist the newly created form (or components) so whenever other user logs in he'll also be able to see it
We are using react to create our frontend so is there any way to achieve this?
One solution came to my mind that we can store the information to create new components into a database and then fetch that with an API into the component we want and then render it. But they don't want to use a database
I am trying to create components following DRY coding principles but I am stuck with a certain use case. I have a requirement to open an expanded view of a component in a dialog box. The component shows JSON records in a list format with pagination. PFB image:
As you can see there is an expand button(top right corner) which expands the component to a dialog box and shows records in a tablular format. PFB image:
Currently I have copied all the functions and template of the base component to the dialog component to make it work but it openly violates DRY principles and also a bad practice. I also need to keep both the components in sync with each other like the filters should be passed to both the components, etc.
How about a shared service? You put your logic there and then the components are controlling how output is displayed.
Or
Parent component controls how the table component displayed in a div with the selector or if it is opened in the dialog via dialog.open(YourTableComponent,...)
I have three components:
Main (Containing a table component and a button)
Modal component
Form component
The workflow goes like this: A button in main "New X" calls the Modal which opens up with the Form component inside it.
In the above, I have kept the form input as a state of Form (To be able to validate etc.)
Now, I need a new workflow: A double click in the table in Main should open the modal and the form but with the row data entered in the form (To be able to edit the data)
To reuse as much code as possible I wanted to use the same Modal/Form components but pass the row data as props through Modal into component.
As for now, the row data is a state of Main, passed as props to Modal and finally passed as props to Form which then sets it to state.
My question is: Is that the correct way to handle it? In theory I could then have two components having a different state of the data.
Yes, it seems the correct way to handle it. React developer's team recommend to keep the state lifted up as much as possible.
For sure you can handle it in different ways but you'll end quite always to lift the state as up as you can.
Is that the correct way to handle it?
Yes.
In theory I could then have two components having a different state of the data.
No, not really. The Form is the only one that manages the state.
I'm working on an angular 2 application, to keep the explication short, I have a navbar on the left, and on the rest of the page, and I will display my content.
Those content will be blocks, as in the attached image, the navbar contains 4 actions (Form, test1, details ...)
The content in the middle will display everything, but when I click on form, form will be shown in the middle, when i click on Details, the details block will be shown in the middle.
The user can scroll down and up to see the blocks.
I saw that in Angular 2 we can user Fragment to precise anchor and what blocks we want to show, but the problem is that there is a bug on the fragment functionality.
At the moment, I have a router-outlet that changes the view depending on the url in the routerLink on each button of the navbar. Should I keep using it if i want to display all the blocks/components on the same page?
Thanks for your help,
here is the screenshot
So in essence, you want a multitude of components, with a menu that doesn't really navigate, but more so has toggle buttons that either display or hide content? What should a page refresh do? Does it matter if you see the same components then? If so, you either have to store state in local storage / session storage / using ngrx... or you have to add the displayed items to the route and resolve those.
Anyhow, in the end you want one component which decides what is displayed, and all the blocks in their own components with their own selectors which you show / hide using *ngIf.
Your html would basically look like this:
<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>
I have a custom component in ExtJs that is a form field (GridField). It displays a grid as a form field and works as expected. The observations are as follows:
When the form is rendered alone (eg. in a window or the first panel in a card layout, everything shows just fine)
When the form is is not the first panel in a card layout or is hidden the first time it is rendered, the field name shows and the space required is left but the control does not show.
I did some inspection and found out that the custom component is actually rendered but the width of all the html elements (divs, etc) were 0. They all had the style (width:0). My guess is that it is because the form panel was not visible at the time the rendering was done.
In terms of implementation of the control, I am extending Ext.form.field.Base. In initComponent, I simply call this.on('afterrender', this.initControl) to run the custom code for the additional control after render. Here the input field is hidden and the grid is rendered where it is supposed to be.
My questions are
1. How do I force the control to re-render so that the width is no longer 0?
2. If the current implementation is wrong, what is the right way to use a grid or another ext component as a form field?
Have you tried to call the "doLayout" method to make sure that the dimensions are reapplied correctly? Re-rendering is not common in Extjs, usually doLayout does the trick. If it doesn't, there may be something up with your implementation itself.