Picking up Ctrl/Shift+Click with Reactjs
I am working on using event.ctrlKey and event.shiftKey in my onClick event to allow for multiple selections in a menu. To keep things simple, I replaced the action to be taken in the code here with some console logs. With the code below, if I put in breakpoints and inspect the event mid-execution after clicking while holding shift or control, I am unable to find the ctrl/shift booleans on the event and the code determines the first two parts of the logic to be false and prints "click".
Method
handleOnClick = (e, id) => {
if (e.ctrlKey) {
console.log('control ')
} else if (e.shiftKey) {
console.log('shift ')
} else {
console.log('click ')
}
}
Execution
<ListItem
key={q}
onClick={() => this.handleOnClick(event, q.get('_id'))}
>
I was noticing in my research that it seems the KeyboardEvent (not MouseEvent) is really the one that has the boolean properties for shiftKey and ctrlKey, but all of the examples I have found don't seem to address this differentiation.
Does anyone have any idea as to how I can get my code to hit the appropriate part of the logic for handleOnClick when the shift or control keys are held during the click? Right now, my console prints "click", no matter what combination of clicks and keystrokes (or lack thereof) I employ....
javascript reactjs properties mouseevent
asked Nov 22 at 17:58
Kelsey Niemeyer
61
add a comment |
I am working on using event.ctrlKey and event.shiftKey in my onClick event to allow for multiple selections in a menu. To keep things simple, I replaced the action to be taken in the code here with some console logs. With the code below, if I put in breakpoints and inspect the event mid-execution after clicking while holding shift or control, I am unable to find the ctrl/shift booleans on the event and the code determines the first two parts of the logic to be false and prints "click".
Method
handleOnClick = (e, id) => {
if (e.ctrlKey) {
console.log('control ')
} else if (e.shiftKey) {
console.log('shift ')
} else {
console.log('click ')
}
}
Execution
<ListItem
key={q}
onClick={() => this.handleOnClick(event, q.get('_id'))}
>
I was noticing in my research that it seems the KeyboardEvent (not MouseEvent) is really the one that has the boolean properties for shiftKey and ctrlKey, but all of the examples I have found don't seem to address this differentiation.
Does anyone have any idea as to how I can get my code to hit the appropriate part of the logic for handleOnClick when the shift or control keys are held during the click? Right now, my console prints "click", no matter what combination of clicks and keystrokes (or lack thereof) I employ....
javascript reactjs properties mouseevent
asked Nov 22 at 17:58
Kelsey Niemeyer
61
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06
add a comment |
I am working on using event.ctrlKey and event.shiftKey in my onClick event to allow for multiple selections in a menu. To keep things simple, I replaced the action to be taken in the code here with some console logs. With the code below, if I put in breakpoints and inspect the event mid-execution after clicking while holding shift or control, I am unable to find the ctrl/shift booleans on the event and the code determines the first two parts of the logic to be false and prints "click".
Method
handleOnClick = (e, id) => {
if (e.ctrlKey) {
console.log('control ')
} else if (e.shiftKey) {
console.log('shift ')
} else {
console.log('click ')
}
}
Execution
<ListItem
key={q}
onClick={() => this.handleOnClick(event, q.get('_id'))}
>
I was noticing in my research that it seems the KeyboardEvent (not MouseEvent) is really the one that has the boolean properties for shiftKey and ctrlKey, but all of the examples I have found don't seem to address this differentiation.
Does anyone have any idea as to how I can get my code to hit the appropriate part of the logic for handleOnClick when the shift or control keys are held during the click? Right now, my console prints "click", no matter what combination of clicks and keystrokes (or lack thereof) I employ....
javascript reactjs properties mouseevent
asked Nov 22 at 17:58
Kelsey Niemeyer
61
I am working on using event.ctrlKey and event.shiftKey in my onClick event to allow for multiple selections in a menu. To keep things simple, I replaced the action to be taken in the code here with some console logs. With the code below, if I put in breakpoints and inspect the event mid-execution after clicking while holding shift or control, I am unable to find the ctrl/shift booleans on the event and the code determines the first two parts of the logic to be false and prints "click".
Method
handleOnClick = (e, id) => {
if (e.ctrlKey) {
console.log('control ')
} else if (e.shiftKey) {
console.log('shift ')
} else {
console.log('click ')
}
}
Execution
<ListItem
key={q}
onClick={() => this.handleOnClick(event, q.get('_id'))}
>
I was noticing in my research that it seems the KeyboardEvent (not MouseEvent) is really the one that has the boolean properties for shiftKey and ctrlKey, but all of the examples I have found don't seem to address this differentiation.
Does anyone have any idea as to how I can get my code to hit the appropriate part of the logic for handleOnClick when the shift or control keys are held during the click? Right now, my console prints "click", no matter what combination of clicks and keystrokes (or lack thereof) I employ....
javascript reactjs properties mouseevent
javascript reactjs properties mouseevent
asked Nov 22 at 17:58
Kelsey Niemeyer
61
asked Nov 22 at 17:58
Kelsey Niemeyer
61
asked Nov 22 at 17:58
Kelsey Niemeyer
61
asked Nov 22 at 17:58
Kelsey Niemeyer
61
asked Nov 22 at 17:58
Kelsey Niemeyer
61
61
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06
add a comment |
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06
add a comment |
active
oldest
votes
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%2f53436172%2fpicking-up-ctrl-shiftclick-with-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53436172%2fpicking-up-ctrl-shiftclick-with-reactjs%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
Someone might have a cleaner solution, but have you tried setting a global boolean variable to true when the shift or ctrl key is pressed during the onKeyDown event (and respectively setting it to false onKeyUp) and then checking against that global variable in the onClick event?
– Jon Warren
Nov 22 at 19:00
I have not! Thank you :) I'll try that, at least to get me functioning, if only in the intereum.... You are amazing!
– Kelsey Niemeyer
Nov 22 at 19:06