Any global onClick function in react?
Multi tool use
When we develop the website in jQuery , we can do something like this.
$('button').click(function(){
//Add Google Analytics
})
But in react, we make different components with styled-component
I don't want to add the onClick function in each page and components.
Can I add something like jQuery click function?
javascript reactjs styled-components
asked Dec 28 '18 at 3:32
MeSking
32
add a comment |
When we develop the website in jQuery , we can do something like this.
$('button').click(function(){
//Add Google Analytics
})
But in react, we make different components with styled-component
I don't want to add the onClick function in each page and components.
Can I add something like jQuery click function?
javascript reactjs styled-components
asked Dec 28 '18 at 3:32
MeSking
32
2
I think you are missing the power of React. In react you create one single component called for exampleMyButtonwhich does your custom action, and in all the pages in the HTML you simply add<MyButton />where you need it
– quirimmo
Dec 28 '18 at 3:33
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26
add a comment |
When we develop the website in jQuery , we can do something like this.
$('button').click(function(){
//Add Google Analytics
})
But in react, we make different components with styled-component
I don't want to add the onClick function in each page and components.
Can I add something like jQuery click function?
javascript reactjs styled-components
asked Dec 28 '18 at 3:32
MeSking
32
When we develop the website in jQuery , we can do something like this.
$('button').click(function(){
//Add Google Analytics
})
But in react, we make different components with styled-component
I don't want to add the onClick function in each page and components.
Can I add something like jQuery click function?
javascript reactjs styled-components
javascript reactjs styled-components
asked Dec 28 '18 at 3:32
MeSking
32
asked Dec 28 '18 at 3:32
MeSking
32
asked Dec 28 '18 at 3:32
MeSking
32
asked Dec 28 '18 at 3:32
MeSking
32
asked Dec 28 '18 at 3:32
MeSking
32
32
2
I think you are missing the power of React. In react you create one single component called for exampleMyButtonwhich does your custom action, and in all the pages in the HTML you simply add<MyButton />where you need it
– quirimmo
Dec 28 '18 at 3:33
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26
add a comment |
2
I think you are missing the power of React. In react you create one single component called for exampleMyButtonwhich does your custom action, and in all the pages in the HTML you simply add<MyButton />where you need it
– quirimmo
Dec 28 '18 at 3:33
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26
2
2
I think you are missing the power of React. In react you create one single component called for example
MyButton which does your custom action, and in all the pages in the HTML you simply add <MyButton /> where you need it– quirimmo
Dec 28 '18 at 3:33
I think you are missing the power of React. In react you create one single component called for example
MyButton which does your custom action, and in all the pages in the HTML you simply add <MyButton /> where you need it– quirimmo
Dec 28 '18 at 3:33
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26
add a comment |
1 Answer
1
active
oldest
votes
This is a common question for people who are new to React. You can create a React component which implements your function and use it across your project. This is a code sample with styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
color: #000;
background-color: #fff;
`;
const yourFunction = e => console.log(e);
const Button = (props) => <StyledButton {...props} onClick={yourFunction} />
export default Button;
Whenever you want to use it:
<Button>Click me!</Button>
answered Dec 28 '18 at 4:47
Brian Le
33511
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953368%2fany-global-onclick-function-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is a common question for people who are new to React. You can create a React component which implements your function and use it across your project. This is a code sample with styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
color: #000;
background-color: #fff;
`;
const yourFunction = e => console.log(e);
const Button = (props) => <StyledButton {...props} onClick={yourFunction} />
export default Button;
Whenever you want to use it:
<Button>Click me!</Button>
answered Dec 28 '18 at 4:47
Brian Le
33511
add a comment |
This is a common question for people who are new to React. You can create a React component which implements your function and use it across your project. This is a code sample with styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
color: #000;
background-color: #fff;
`;
const yourFunction = e => console.log(e);
const Button = (props) => <StyledButton {...props} onClick={yourFunction} />
export default Button;
Whenever you want to use it:
<Button>Click me!</Button>
answered Dec 28 '18 at 4:47
Brian Le
33511
add a comment |
This is a common question for people who are new to React. You can create a React component which implements your function and use it across your project. This is a code sample with styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
color: #000;
background-color: #fff;
`;
const yourFunction = e => console.log(e);
const Button = (props) => <StyledButton {...props} onClick={yourFunction} />
export default Button;
Whenever you want to use it:
<Button>Click me!</Button>
answered Dec 28 '18 at 4:47
Brian Le
33511
This is a common question for people who are new to React. You can create a React component which implements your function and use it across your project. This is a code sample with styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
color: #000;
background-color: #fff;
`;
const yourFunction = e => console.log(e);
const Button = (props) => <StyledButton {...props} onClick={yourFunction} />
export default Button;
Whenever you want to use it:
<Button>Click me!</Button>
answered Dec 28 '18 at 4:47
Brian Le
33511
answered Dec 28 '18 at 4:47
Brian Le
33511
answered Dec 28 '18 at 4:47
Brian Le
33511
answered Dec 28 '18 at 4:47
Brian Le
33511
33511
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953368%2fany-global-onclick-function-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
rI2bBmTK31MrZknsE lwx5,crlOPwa8gU8
2
I think you are missing the power of React. In react you create one single component called for example
MyButtonwhich does your custom action, and in all the pages in the HTML you simply add<MyButton />where you need it– quirimmo
Dec 28 '18 at 3:33
You could attach global listener for example in parent component and in the componentDidMount but you need to check if your dom object exists (mounted) already and do your logics.
– Amir Aleahmad
Dec 28 '18 at 3:44
If you're using React, try to follow React's practices. React is an interface library, so you add onClick behaviour to the component that needs onClick behaviour, and then you simply use that component wherever it is needed in the UI. If you need a global event handler, you are definitely doing React wrong, and are probably trying to implement "not React" in React (e.g. you're trying to force jQuery ideas into React code, which is a guaranteed recipe for bad code)
– Mike 'Pomax' Kamermans
Dec 28 '18 at 4:26