I have a page with dynamic tabs and each of them have a form input. There is a common Submit for each of these forms. As of now, I have a separate component for each of the forms and each of them have multiple user inputs.
<div id="#parentComponent">
{myForm1 && <div><MyForm1 {...props}/></div>}
{myForm2 && <MyForm2 {...props} /></div>}
<div>
<input type="submit">
Now, my question is on Submit (common and in the parent component), I want to be able to access each of the form input values. But as of now, my inactive tab/component gets destroyed and only the active tab/component is there in the DOM.
What is the best way to handle this? Also should there be any preference to controlled/uncontrolled components to handle this use case ?
As of now, I am using the uncontrolled form for these form inputs (using the useformcontext)
I would keep the state in a higher order component, and update it by any change withing the forms.
I would pass down a setFormsData function to every form, and add their data on every change, keeping the old state, like this:
const handleOnChange = value => setFormsData(oldFormData => {...oldFormData, ...value})
You can also use a redux store if you wish.
Related
I'm new in react and I have an abstract question. Imagine that I have a button component without any logic. I have 2 tasks. 1) I have to add the product to the cart on click 2) I have to submit the form on click.
My question is can I somehow add logic without modification
button component?
Taking the component as a basis, make a new one and add the logic that I need?
I tried wrapping the component and doing something but still going back to adding a new prop to my ui component
You have to do this by adding an onClick prop to the button component and then passing it to the <button /> element in the jsx. While creating UI components it is better to pass all props to the wrapped element and override the style properties. Refer to the below example.
const CustomUIButton = (props) => <button className="custom-css" style={customStyle} {...props} />
const customStyle = {};
This way you are letting the user override the existing styles as well.
I hope I have answered your question.
I have a parent component which is a set of child filter menu components. Each child component has a group of radio buttons, and the buttons all determine whether they are checked via their state.
In the parent component, when there is at least one filter for which the user has made a selection, a list of buttons appears of the selected filter options.
When one of these buttons is clicked, it should call a function within that child component to reset its radio groups.
I have seen here and here how to call a function within a single child ref when that ref is known, but how would I accomplish this when the refs are generated in a loop, and I want to only to call the ref of the specific child component that matches the button that was clicked?
Here is the relevant [pseudo-code]:
//FILTERS.JS
{filters.map((filter, index) => {
return (
<FilterContainer
key={`filter--${filter.id}`}
//NEED UNIQUE REF HERE THAT I CAN CALL
/>
)
})}
handleClearSelectedFilter = ()=>{
this.[matchingFilterContainerRef].current.resetRadioGroup();
}
where matchingFilterContainerRef would be the dynamic ref I match to the button that was clicked for the corresponding filterContainer child component.
With hopes I understand your issue correctly, I would like to suggest a different approach.
In the parent component you have a state which hold the filters. each of these filters has its own set of values. The parent then maps over the filters and passes each FilterContainer the props it needs, like the values for it, and also a callback function to when there was a change.
According to the values, the FilterContainer knows how to render its radio buttons. Data is flowing from the parent to the child in a single direction.
Once a radio button is clicked, you will call the callback given by the parent with the filter field and current value, e.g. a gender radio button was clicked, you will call this.props.onValueChange('gender', 'female').
The parent will then receive the callback and set its filters state accordingly. The state changes, the filters get rendered again with the new data.
Hope this helps :)
You can do like this
{filters.map((filter, index) => {
return (
<FilterContainer
key={`filter--${filter.id}`}
ref={`ref_${filter.id}`}
//NEED UNIQUE REF HERE THAT I CAN CALL
/>
)})}
And when you want to access it:
this.refs[`ref_${filterId}`]
See more here reactjs-dom-dynamic-refs
I have angular component, which is loading other components , now in a event change say dropdown item selection, i need to reload just one specific component. Is it Possible to do that?
I looked into some answers in stack overflow itself but mostly are about reloading the whole page.
<dropdown (change)="detectChange($value)" />
<Component-one></Component-one>
In one component i have a 'drop down' with few values, and other component say 'component-one' already loaded with it , when the value in the "dropdown" changes i need to reload "component-one".
It is a general question. First of all you need to understand what you want to achieve in the end.
One way for "reloading" component, pass some data to the component based on the dropdown value, so, it will automatically "reload".
The other way is that you can have url param or query param based on the dropdown value, and on dropdown value change, navigate to the route with new param value, so the component will "reload".
I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.
I have some troubles getting data from a form in react. The form itself is dynamic, meaning that some of my fields aren't always there, but only rendered in specific cases.
When attaching these its hard to anticipate how the state of the container should look. And also which handleChange functions should be there. The components in my form are 2 levels deep at least, so the component is in itself rendering the final input component to the DOM.
Did some looking and found that people have been using refs, but there is a lot of negative opinions about this approach. And it does seem kinda... Fiddly.
Question:
How could you go about getting all the data from a form when its dynamic?
The setup:
<Form onSubmit={this.acceptOffer.bind(this)}>
<MainProductContainer offer={this.state.offer}/>
<RequirementsContainer requirements={this.state.offer.requirements}/>
<Segment basic textAlign='center'>
<Button
type='submit'
content='Send'
primary
loading={this.state.accept_state == 'pending'}>
</Button>
</Segment>
.
acceptOffer(event) {
//This is where I want to get all the data from the form
}
Here you can find how to do it: React Native how to pass this.setState change to parent