React - Select multiple checkboxes holding Shift key

Multi tool use
I have a list of checkboxes in my React App. When I hold Shift key and click one - the others between current and the nearest checked one should become selected.
For now I'm tring to do somethimg like this:
<input onChange={(e)=>this.handleCheckbox(e)} value={id} checked={this.state.selected.IndexOf(id) > -1} type="checkbox" />
handleCheckbox(e){
if(e.shiftKey){
console.log("shiftKey is hold")
}
//here goes some logic to save checkboxes in the state
}
But the condition if(e.shiftKey)
is never executed. What am I doing wrong?
reactjs checkboxlist shift
add a comment |
I have a list of checkboxes in my React App. When I hold Shift key and click one - the others between current and the nearest checked one should become selected.
For now I'm tring to do somethimg like this:
<input onChange={(e)=>this.handleCheckbox(e)} value={id} checked={this.state.selected.IndexOf(id) > -1} type="checkbox" />
handleCheckbox(e){
if(e.shiftKey){
console.log("shiftKey is hold")
}
//here goes some logic to save checkboxes in the state
}
But the condition if(e.shiftKey)
is never executed. What am I doing wrong?
reactjs checkboxlist shift
1
You must use theonKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex
– keul
Jan 3 at 9:18
add a comment |
I have a list of checkboxes in my React App. When I hold Shift key and click one - the others between current and the nearest checked one should become selected.
For now I'm tring to do somethimg like this:
<input onChange={(e)=>this.handleCheckbox(e)} value={id} checked={this.state.selected.IndexOf(id) > -1} type="checkbox" />
handleCheckbox(e){
if(e.shiftKey){
console.log("shiftKey is hold")
}
//here goes some logic to save checkboxes in the state
}
But the condition if(e.shiftKey)
is never executed. What am I doing wrong?
reactjs checkboxlist shift
I have a list of checkboxes in my React App. When I hold Shift key and click one - the others between current and the nearest checked one should become selected.
For now I'm tring to do somethimg like this:
<input onChange={(e)=>this.handleCheckbox(e)} value={id} checked={this.state.selected.IndexOf(id) > -1} type="checkbox" />
handleCheckbox(e){
if(e.shiftKey){
console.log("shiftKey is hold")
}
//here goes some logic to save checkboxes in the state
}
But the condition if(e.shiftKey)
is never executed. What am I doing wrong?
reactjs checkboxlist shift
reactjs checkboxlist shift
asked Jan 3 at 9:13


AnnaAnna
339116
339116
1
You must use theonKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex
– keul
Jan 3 at 9:18
add a comment |
1
You must use theonKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex
– keul
Jan 3 at 9:18
1
1
You must use the
onKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex– keul
Jan 3 at 9:18
You must use the
onKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex– keul
Jan 3 at 9:18
add a comment |
2 Answers
2
active
oldest
votes
onChange
is trigged after you let the key up. You should use the onKeyDown
event.
add a comment |
Just for someone else who runs into this... To check if the Shift key is pressed, you do e.nativeEvent.shiftKey. Hope this helps. You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
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%2f54019239%2freact-select-multiple-checkboxes-holding-shift-key%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
onChange
is trigged after you let the key up. You should use the onKeyDown
event.
add a comment |
onChange
is trigged after you let the key up. You should use the onKeyDown
event.
add a comment |
onChange
is trigged after you let the key up. You should use the onKeyDown
event.
onChange
is trigged after you let the key up. You should use the onKeyDown
event.
answered Jan 3 at 10:36


Bojan IvanacBojan Ivanac
795516
795516
add a comment |
add a comment |
Just for someone else who runs into this... To check if the Shift key is pressed, you do e.nativeEvent.shiftKey. Hope this helps. You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
add a comment |
Just for someone else who runs into this... To check if the Shift key is pressed, you do e.nativeEvent.shiftKey. Hope this helps. You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
add a comment |
Just for someone else who runs into this... To check if the Shift key is pressed, you do e.nativeEvent.shiftKey. Hope this helps. You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
Just for someone else who runs into this... To check if the Shift key is pressed, you do e.nativeEvent.shiftKey. Hope this helps. You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
answered Feb 20 at 22:24
justcodejustcode
2161213
2161213
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.
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%2f54019239%2freact-select-multiple-checkboxes-holding-shift-key%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
1R480G7q3lyXlPKMehwSK,65eX0NyuI,bUOykxDsd6,u2vDr88W4V2g 9r400wJaSntGghPuwE6mjrygi,Tt
1
You must use the
onKeyDown
event to capture keyboard changes. This will probably make you event handler a little more complex– keul
Jan 3 at 9:18