In React, the imported JS code is read before rendering the HTML, right?
If I want to add an EventListener to an element, I'll always have to do it on the body (or document) load? Would I always need to create a function and attribute it to the <body onLoad="fnOnLoad"> or document.addEventListener("DOMContentLoaded", "fnOnLoad", true); ?
I'm asking this because if you use plain HTML and add the script in the end of the <body> section, It'll add the event to the element without me having to add it "on Load" of something, right?
If you are using something like create-react-app, you only need to add event attribute to the element:
<Element onClick={//your code} />
or
<Element onChange={//your code} />
Check the docs here: https://reactjs.org/docs/events.html
componentDidMount and componentWillUnmount methods will do your tasks.
componentDidMount: When the component is mounted, add your DOM listener
componentWillUnmount: Make sure to remove the DOM listener when the component is unmounted
Following link might be Helpful for you.
https://linguinecode.com/post/react-onclick-event-vs-js-addeventlistener
Related
Could someone help me to create popover in ReactJS UI, Something like below image.
You can do this quite easy using one of the popular ui component frameworks. For example bootstrap/jquery.
Follow the steps below and you will be fine:
In render method of the parent component prepare html layout in accordance with guidelines for the component:
Toggle popover
In componentDidMount method of the parent component:
$("#mypopover").popover();
And finally in componentWillUnmount:
$("#mypopover").popover('destroy')
I'm trying to get the recaptcha response so that I can pass along it via redux-form.
Have tried the 2 methods below...
Attempt 1:
Specifying callback in <head>.
index.html:
<script src='https://www.google.com/recaptcha/api.js?onload=callback&render=explicit'></script>
The problem here is that the callback is in global scope but I need to access it in React components.
Attempt 2:
Specifying callback in DOM.
Component: handleRecaptcha(resp)
handleRecaptcha(resp) {
console.log(resp);
}
Component: render():
<div className="g-recaptcha" data-callback={this.handleRecaptcha.bind(this)} data-sitekey="***"></div>
index.html:
<script src='https://www.google.com/recaptcha/api.js'></script>
I get the message ReCAPTCHA couldn't find user-provided function: function () { [native code] } after submitting the recaptcha. Probably a scope problem too.
I'm trying to avoid using another library, since I think this is a rather trivial problem.
Would anyone happen to have any idea how to go about it?
All I need is to get hold of the widget instance, and do grecaptcha.getResponse(widget) to get the response. API ref
Use react-recaptcha
import Recaptcha from 'react-recaptcha'
<Recaptcha
sitekey="xxxxxxxxxxxxxxxxxxxx"
render="explicit"
verifyCallback={verifyCallback}
onloadCallback={callback}
/>
You could also try Reaptcha.
It is a lot cleaner, more modern and has more of a React-way approach in handling the reCAPTCHA widget.
<Reaptcha
sitekey="YOUR_API_KEY"
onVerify={() => {
// Do something
}}
/>
I'm using react-slick slider and can't figure out how I can re-initialize the slider. With the jquery slick plugin, I can call $slick.reInit(), but using react I can't seem to do this. Is there something similar I can do in react to the reinit method?
There is no such feature for now, but there is a way to do it.
If you wrap Slick with a component and give it a unique key, slick reloads each time the key changes
render: function() {
return <div key={uniqueId}>
<CarouselComponent>
</div>;
}
I am trying to mount a react component using jquery to a bootstrap modal body and then open the modal after a successful ajax request, however I cannot seem to get the react component to load. This is what I have so far:
After success I am calling the assignModal function, I am inside a parent react component.
assignModal: function(){
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>);
$("#vuln-assign-modal").modal('show');}
And here is the react component
Cortex.VulnerabilityList.AssignModal = React.createClass({
componentDidMount: function() {
console.log("Component mounted")
},
render: function() {
return (
<h1>Hello</h1>
)
}
});
From my experience, you're going to have trouble if you try to use both jQuery and React to manipulate the DOM. If it's at all an option for you, get rid of jQuery and fully embrace React's declarative programming paradigm.
But maybe you have jQuery widgets you want to use. In that case, try and design your app in such a way that jQuery never writes to the DOM within your React tree.
So a few options:
Use jQuery and React, but separately - Have your React app descending from some root <div> and have your modal in a sibling <div>. Then just use jQuery and normal HTML to render your modal without involving React.
Stop using jQuery - Use React to manage your modal. So instead of responding to assignModal by setting the innerHTML of a DOM element with jQuery, simply set some global state to showModal = true and in the render method of the modal if (!showModal) return null or something like that. I wrote a post about this recently.
I have a container div with some static HTML. I don't want my react router to do anything if default location is /. It expects a default view which I don't have. Is there an easy solution.
I tried this but it doesn't work with back/forward browser button?
var initApp = function() {
Router.run(routes, function(Handler) {
if(Router.HashLocation.getCurrentPath() !== '/') {
React.render(<Handler/>, document.getElementById('top-container'));
}
});
}
Seems hacky to suggest - but have you tried passing a mocked component (not inheriting from React.Component) with a no-op render: function() {}? Otherwise, I think React will replace your wrapper's innerHTML.
On the other hand - are you rendering server-side? If so, the output of a "dumb" component handler for '/' which prints the same markup as your container currently holds, would quite literally be static HTML anyway, despite being rendered by React.