Modify Redux Form Value and Trigger Onchange - javascript

I have a simple hidden input field in my React Redux-Form and the value of the field is set by some Google Tag Manager code that basically does document.getElementById('gtm_field').value = 'some value'
The onchange event never gets fired and therefore the value of the form field never gets set in my Redux store. What is the recommended way to approach this problem? Note that I can modify the GTM code that is added to the page do trigger HTML element events, but it has to be added 'outside' the context of my React app.
Is there a simple way to set the value of a redux-form input field from 'external' JS?

You should use the function change() in redux-form props, it could change the value of a field in the Redux store. The usage like this:
handleChange() {
this.props.change(field:String, value:any)
}

Related

update input field value in react JS state

this is my first question here,pardon me for any mistake. So ,I have a few inputs and for displaying the values of them I used some elements like h1 and div's which are in a seperate component. I want my elements to have some default value, so for that I kept them in state and then I call an onChange function on inputs which will update my elements state. I tried doing it with event.target like nameElement:event.target.value ,it would have worked if i had one input but because I have multiple inputs ,when I change an input field it gets overwritten by the one I change next. So how can I update only the input field I change. Like if I write something in name input field only the element of CV which is holding the name field should change . Here's my code sandbox link https://codesandbox.io/s/cool-glitter-9w2mh?file=/src/App.js
I am not sure, I got the issue right. But I got into the sandbox and below are my observations.
I would advise using Formik if you are dealing with the user-input form. Link - https://formik.org/docs/tutorial
Since you have created a single state that contains default value as well as user input value, any changes made by the user is not saved after clicking on "viewCV" link that re-renders entire component.
Changes Required
Have two states : initialData and userDetails.
Modify handleChange
handleChange = (input, e) => {
this.setState((prevState) => {
return {
...prevState,
[input]: e.target.value
};
});
};
In components such as workExp, education make sure you link handleChange as an arrow function for the "onChange" event.
<input onChange={(e) => handleChange("job", e)}>Email
Modify submit button to render the Resume template with user inputted values.
Modify viewCV link which is causing entire parent component re-rendering.

how to edit and change/rename the title(React)

Hello:) I am writing simple application(similar to to-do-list). The task is to add such functionality as the ability to change the title of the announcement.
You add the title and description of the announcement and click on "submit" button -> https://prnt.sc/tf8zxl
the annoncement appears below and you need to have the ability to change the title of it(rename it)->https://prnt.sc/tf8xa2
I added the input when click on the title but it does not allow to write inside it and I do not have any ideas on how to save it in this.state.data correctly.
here is the source code -> https://codesandbox.io/s/eager-darkness-uh9xl?file=/src/App.js
Controlled input
If you need controlled input you have to change values somehow. You are not changing anything at this moment and you are calling handleChange which changes state.title, not state.data[someIndex].title - so the value cannot be changed.
I've provided modified solution where is updating finnished.
Uncontrolled input
If you are OK with uncontrolled input you are probably looking for input attribute defaultValue instead of value. It doesn't change because you are not changing value at all so it's being instantly re-rendered with original value from this.props.data.title.
I've set value by attribute defaultValue and changed onChange on onBlur so update will triger only when you lose focus.
Your modified codesandbox.
Use input in this way
const [title,setTitle] = useState('')
<input type="text" value={title} onChange={(e)=>setTitle(e.target.value)} />

Is this a controlled or uncontrolled React component?

I read the answers on this question but none is similar to my set up:
What are controlled components and uncontrolled components?
I have a parent component and many children as inputs. Each input has a defaultValue that is set using a prop received from the parent and the validation of the input is performed on onBlur. This is because the validation is asynchronous, so onChange would slow down the app like crazy.
How is this orchestration called? The traditional definition for "controlled" seems to be an input which updates on every onChange, while an "uncontrolled" input is one which manages its own internal state, which is later accessed via a ref. My set up seems to fall short of both, sitting somewhere in the middle - or not?
Update: Here's a CodeSandbox.
If I understand your setup correctly, your inputs are uncontrolled, because their state is held in the DOM rather than in React state. Validation is a separate concern, which can happen synchronously or asynchronously. You can let React state hold the values whatever you do for validation. Note that most of the time you don't want to prevent the input from even having an invalid value - you just want to ensure that the user can't submit the form while the values are invalid. Thus you can have an onChange handler to set some value on state as in the following:
<input type="text"
value={this.state.myValue}
onChange={val => this.setState({myValue: val},
()=> this validateMyValue(this.state.myValue))}} />
this.validateMyValue could be asynchronous, and do whatever is required if validation fails. That would be a controlled component doing what you want.

Set the value of a form element using javascript - still prompts required field

I am setting values on a form in an iframe via Javascript.
Please note that I do not have access to the page displayed in the iframe. My Javascript page is on the same server, so it has access to the form displayed.
//HTML of Forename field in form control
<input class="form-control" id="Forename" type="text" data-bind="value: dto.Forename">
Javascript setting the value:
var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
fieldNode.value = FirstName; //previously defined
The values set successfully (see attached img). However, when I hit SAVE, I still get a 'values Required' message. I suspect this is because the Knockout Javascript libraries that binds the value with the view model, needs a keypress.
Even when I manually go into the form and press Enter/Tab after each value, I still get the message. It's only when I change the Forename and Surname manually to something else that the Save is successful.
Has anybody done something like this before? Thanks
In this image you can see the values are set
I believe the problem you're experiencing is actually due to a deeper issue involved in using a knockout binding. Updating the value of a UI control directly has no effect because the real underlying value is stored in a javascript view-model object. The DOM element only mirrors that value, and updates are performed using a change event hook under the hood. When you change the value manually on the UI the change event is triggered and the view-model value gets updated.
Knockout.js Docs
So to properly update the values you should try using the knockout library to update the underlying data:
var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
var viewModel = ko.dataFor(fieldNode);
viewModel.dto.Forename(FirstName); //value setting works like a function
If you can't get that to work you can also try manually triggering the change event. That's far easier if you have jQuery, but can still be done without. See How can I trigger an onchange event manually?

How to handle complete form submission in React JS instead of using onChange handlers for each field?

As per React demo and other samples, I see everyone attaching an onChange eventhandler to each form field they want to store.
I don't want to onChange or other events to keep executing until the form is actually submitted.
I want to access and setState on form submit (handleSubmit) handler.
This is react's demo
Add refs to the input fields, remove value and onChange attributes from the input tags and read those values in your handleSubmit function. You could do that, but it's not very reactive.

Categories

Resources