I've got a Gatsby site that uses a handful of plugins and third-party components. The component in question is a form built with react-hubspot-form. Hubspot sends raw HTML which I'm able to style with CSS. There are two potential hangups I've got with this, both of which deal with targeting specific elements in that form.
I'm looking to add Google Analytics to the submit button to track clicks. I've thought about wrapping the component and adding an onClick to the parent, but this would track clicks anywhere on the form, not just the submit button. I'm currently trying to incorporate ReactGA.
The second issue is updating state when a user selects a radio button. I need to dynamically update a url based on which radio button the user selects and cannot currently figure out how to do that.
<HubspotForm
portalId='PORTAL_ID'
formId='FORM_ID'
redirectUrl={`URL_WITH_PROPS_TO_DYNAMICALLY_UPDATE_LENDER_CODE=${props.lenderCode}`}
submitButtonClass='loanAppSubmitBtn'
cssClass='program-apply'
onSubmit={()=>{
ReactGA.event({
category: 'Apply Now Button',
action: 'click',
label: 'form submission'
})
console.log("clicked hidden button")
}}
/>
When I tried putting a function for onSubmit, the console said I needed to use jQuery.
Related
I have created an antd table on my page. In my table rows i have given an option to edit. The edit option is basically an icon which opens up a modal with the form in it.
When the user clicks on the submit button of modal the form submits and the field is edited.
Problem
My problem is that if i manage the state globally using redux then on clicking one edit icon all the modals open up together of all the table rows.
But i dont want that.I want to create a single component of modal and pass a form as a children prop and on submission of form my modal closes.
I used CreateRef to change the state of child component but wasnt able to achieve what i want.
I think your app dependency is like this App -> Table -> Row
<Modal> should be a separate component inside App, so only single <Modal> instance can display in the whole App
I have a component that uses onClick and onFocus. Both of the events call the same function that loads data from an API.
When the user is tabbing through elements on the page and lands upon this component's child textarea, onFocus runs and loads data from an API.
However, when the user clicks on the component's textarea child, both the onClick and onFocus events try and load data from the API. I want to prevent both events from firing a function twice.
I do NOT want to put events on the text area itself if possible.
function DataRow(props) {
function focused(e){
props.loadDataFromAPI(); /* This will get ran twice if clicked on tr element's textarea */
}
return <tr onFocus={focused} onClick={focused} ><textarea></textarea></tr>;
}
As you can see, I want it to get called when the user clicks on the tr as well as clicks/focuses on the textarea. I just don't want that duplicate call when clicking on the textarea!
Maybe you can implement a debounce system to avoid this behaviour.
In this way not only you will avoid this double event firing, but you will prevent user to spam you and polling request if he starts to repeatedly click on the button.
There are a lot of answers out there about debouncing, maybe you can give a look at lodash debounce, or google for specific React systems like debounce hooks.
We are currently building a reactjs application. One of the component requires the use of react-google-chart to display an annotation chart.
Am able to get the chart displayed without issues - a requirement specifies that on the annotations table to the right we have a button for each row and clicking on that should trigger a event that could access a method on the parent component (i.e a parent component holding the Chart)
Here is a sandbox code for this
https://codesandbox.io/s/react-google-charts-annotation-chart-d4px2
Note the 'Click me' buttons on the annotation table next to the chart
Solutions Tried
Initially tried with 'select' event of the google annotation
chart(passing in chartEvents) but those events are fired on the chart
but would not be fired when clicked on the annotation table
Tried passing in a function as a property to the react-google-chart componet as shown but from button onClick there was no way i could refer this function via property like this.props.getDetail etc..
Ideally would like to see a solution where clicking the buttons on the annotation chart ....we are able to call a function on the parent component.
Currently cant access a function(#getDetail) in the parent component i.e App in the above example
How to disable submit button until all fields are filled in in reactjs with redux-forms.
To be more specific i have a form that consists only from radio buttons. So for every question there is 5 radio buttons to choose from. And i want by submit button to be disabled until all question are answered.
You need to leverage sync validation as shown here https://redux-form.com/6.6.3/examples/syncvalidation/ this will validate whole form if it's valid and pass necessary props to the component https://redux-form.com/6.6.3/docs/api/props.md/
invalid, valid
Then you can just bind disabled={invalid}
I created a sandbox to better illustrate it
I have a form (done in AngularJS) for entering records into a movie database. Within the form I have a dropdown of actors which the user can select from to add to the movie record that they are in the middle of creating. When the user clicks the button next to the dropdown to add the actor to the movie, it submits the entire form. I could, of course, take the easy way and use a div instead a but I feel that I shouldn't have to work around this like that. Is there a standard of way of dealing with this?
In these situations, as buttons in default are type="submit", Just set type="button" on all buttons that you do not want them to submit the form.
That would do the trick for you.
You can handle the click using ng-click.
In the Dom:
<button ng-click="handleClick()">I love Polka Dot Bow Ties.</button>
In the Controller:
$scope.handleClick= function handleClickFn($event) {
$event.stopPropagation();
}
Stopping the propagation of the event, prevents the event from bubbling up to its parent elements and triggering your submit.