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.
Related
i want change field value when click in edit button actually when click in button change value of input field
I am currently using antd-form-builder to build multiple JSON forms for different components and I have an issue with antd trying to use a checkbox to disable another input.. basically I have a function that returns the form meta fields and then in the onChange for the checkbox I am trying to set another field to become disabled
what I have managed to find so far is for the form ref there is a setFields function and I can use this to change the value of another field or the errors on that field through the onChange of the checkbox, however, I cannot change the disabled state of another field.
turns out, this cant be done .. and state variables should be used as mentioned in the issue here
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
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'm learning the ReactJS framework. I'm not clear on below aspect.
When a user enters some value in a form cell, does it modify in actual DOM? or just updates directly first in Virtual DOM?
Thanks.
Neither, React has a unidirectional binding, meaning that when you change the state (using this.setState({...})), render() is called again. This updates the virtual DOM and then updates the actual DOM.
If a user enters input, nothing will happen unless you setup something to change the state on user input (for example, adding onChange()). The onChange function will then need to update the state with the new value.
When you enter a value in form cell and there is no input handler for that input field. The actual DOM is getting modified as you are entering the value in a cell and that value will be persisted in the form cell.
But we usually don't do this, instead we will have a onChange handler in our component which will take the new value and render back the input cell using render method. After render is called, virtual DOM is first updated and then react does its magic of diffing to find out whether the real DOM needs to be updated or not.