I have problem with using redux-form as a server filter. Purpose of the form is on every field change send request to server with actual form values for filtering data in table.
I tried to do it with onChange event attached to "form", then in onChanged event is handleSubmit called. It works until i used it with my custom Field component.
When onChanged is used with custom component, then form onChange event is not fired. It is fired only when is normal field "input" edited.
Is this bug? Are there another ways to submit form after any field change is done? I tried to do it with formValueSelector but comparing values of form every rerender is not optimal.
Example is here https://codesandbox.io/s/98z3kjk12y
The problem is in custom component, namely that it is div - not an element that have onchange event. Honestly, it was something new for me that form has onChange event, but it seems it is fired when any form's child element with onchange event is triggered.
If you try to replace in MyStrangeInput div element with, for example <input type="text"> onFormChange will fired.
As a very, very, very dirty workaround you can customize checkbox with button styles so onFormChange will fired(because checkbox onchange event).
Unfortunately(or fortunately?) redux-form doesn't have handleChange props, so as i see the most clear solution here will be to call onFormChange on each form's field change.
Updated example
Related
I need to fire onBlur event for p-dropdown. I need this to be fired only when the dropdown looses focus. But its firing onBlur event even when I click on dropdown. I know there is 'onSelect' event but I cant use that.
My requirement is, User can either select a dropdown value or can enter any text which is not in dropdown. I need to save the info into DB.
I tried putting a settime but its not working out.
I have a question that why we need to use onchange event in react and set the state on every change event and why we cannot change the state of all the input fields of the form on submit button?
When we use onChange in an input field, it performs all the inbetween steps to set the state on every change event, so why don't we use event.target to store all the states on submit or it is not possible?
you can control the form with state and then you will need to change the state whenever user changes the input by handling onChange method and updating the state, because the input always shows the state value and not whatever user types.
if you want to reset your input fields after submit without using state you have to get the refs of your input (by using useRef or createRef) and change the value property of input imperative after submission.
In react select onBlur event or onMenuClose event is triggered when user selects the option or blur (click outside of the control).
So I want to perform the business logic on blur event if user has not selected an option.
In other words I want to know how blur event is triggered.
onBlur event is triggered when the focusable HTML Element loses focus. Maybe it's easiest to see if select option was changed? Don't know how your implementation looks though but maybe this will help you.
I'm using Semantic-React and I have component-filter which consists of checkbox groups. Every checkbox has id and I must pass them in order to filter the results.First idea was to perform method which would be called after checkbox onCLick(which would pass checkbox id). And in this method set in state an object and after every checkbox click change it. I remember, that in Jquery exists $('form').serialize() which everytime checks form elements and gets checked values automaticaly. Exists something like this in react, or semantic-ui react? I would be simplier to use such method than to create and control object in state
You should use "controlled components":
Filter component should keep a set of checked ids as part of state.
Checkbox checked property should be set to true if the set contains box id (and to false otherwise) in Filter component render.
Checkbox onChange should be handled by filter component and modify state.
Filter can access it's state handling checkbox onChange or button "Apply" onClick (or any other event handled by Filter component).
Be careful: setState is an async function and directly reading other component state can lead to data race, so state must be read after proper event fired by React. Also there are a bunch of state-keepers like Redux.
It is described in official docs here: https://reactjs.org/docs/forms.html
i have a container div that contains many inputs and checkboxes inside, i want to trigger an onBlur event only when the container div loses focus, instead the onBlur event is triggered everytime any element inside it loses focus
React documents this problem by utilizing the event loop with a setTimeout function with an empty second argument.