Get the drop down items in the console in React js
0
I need to fetch the clicked dropdown item and log it in the console using React js.
Code:
<div onClick={this.handleSearchBtn} className="dropdown-menu">
<a className="search-item dropdown-item" href="#" >Authors</a>
<a className="search-item dropdown-item" href="#">Article Title</a>
<a className="search-item dropdown-item" href="#">PMID</a>
<a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>
reactjs drop-down-menu bootstrap-4
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
add a comment |
0
I need to fetch the clicked dropdown item and log it in the console using React js.
Code:
<div onClick={this.handleSearchBtn} className="dropdown-menu">
<a className="search-item dropdown-item" href="#" >Authors</a>
<a className="search-item dropdown-item" href="#">Article Title</a>
<a className="search-item dropdown-item" href="#">PMID</a>
<a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>
reactjs drop-down-menu bootstrap-4
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
For example, you have clicked thePMIDandAuthorsand when you click on the handleSearchBtn, you need to getPMID, Authors, right?
– Thinker
Dec 30 '18 at 4:56
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02
add a comment |
0
0
0
I need to fetch the clicked dropdown item and log it in the console using React js.
Code:
<div onClick={this.handleSearchBtn} className="dropdown-menu">
<a className="search-item dropdown-item" href="#" >Authors</a>
<a className="search-item dropdown-item" href="#">Article Title</a>
<a className="search-item dropdown-item" href="#">PMID</a>
<a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>
reactjs drop-down-menu bootstrap-4
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
I need to fetch the clicked dropdown item and log it in the console using React js.
Code:
<div onClick={this.handleSearchBtn} className="dropdown-menu">
<a className="search-item dropdown-item" href="#" >Authors</a>
<a className="search-item dropdown-item" href="#">Article Title</a>
<a className="search-item dropdown-item" href="#">PMID</a>
<a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>
reactjs drop-down-menu bootstrap-4
reactjs drop-down-menu bootstrap-4
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
edited Dec 30 '18 at 5:41
Mayank Shukla
37.8k75780
37.8k75780
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
asked Dec 30 '18 at 4:41
ReNinjaReNinja
529
529
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
For example, you have clicked thePMIDandAuthorsand when you click on the handleSearchBtn, you need to getPMID, Authors, right?
– Thinker
Dec 30 '18 at 4:56
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02
add a comment |
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
For example, you have clicked thePMIDandAuthorsand when you click on the handleSearchBtn, you need to getPMID, Authors, right?
– Thinker
Dec 30 '18 at 4:56
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
For example, you have clicked the
PMID and Authors and when you click on the handleSearchBtn, you need to get PMID, Authors, right?– Thinker
Dec 30 '18 at 4:56
For example, you have clicked the
PMID and Authors and when you click on the handleSearchBtn, you need to get PMID, Authors, right?– Thinker
Dec 30 '18 at 4:56
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02
add a comment |
1 Answer
1
active
oldest
votes
1
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));Here is the demo
Hope it helps :)
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am usingevent.target.className.indexOf("search-item") !== -1since all the anchor tag has the classsearch-item
– Thinker
Dec 30 '18 at 5:30
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
});
}
});
draft saved
draft discarded
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%2f53975328%2fget-the-drop-down-items-in-the-console-in-react-js%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
1
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));Here is the demo
Hope it helps :)
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am usingevent.target.className.indexOf("search-item") !== -1since all the anchor tag has the classsearch-item
– Thinker
Dec 30 '18 at 5:30
add a comment |
1
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));Here is the demo
Hope it helps :)
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am usingevent.target.className.indexOf("search-item") !== -1since all the anchor tag has the classsearch-item
– Thinker
Dec 30 '18 at 5:30
add a comment |
1
1
1
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));Here is the demo
Hope it helps :)
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
From my understanding, you can do something like this
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));Here is the demo
Hope it helps :)
class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));class Anchor extends React.Component {
state = {
selected: ''
}
handleSearchBtn = (event) => {
if (event.target.className.indexOf("search-item") !== -1) {
this.setState({ selected: event.target.text });
}
};
render() {
return (
<div onClick={this.handleSearchBtn} className="dropdown-menu">
selected: {this.state.selected}
<a className="search-item dropdown-item" href="#">
Authors
</a>
<a className="search-item dropdown-item" href="#">
Article Title
</a>
<a className="search-item dropdown-item" href="#">
PMID
</a>
<a className="search-item dropdown-item" href="#">
Mesh Terms
</a>
</div>
);
}
}
ReactDOM.render(<Anchor />, document.getElementById("root"));answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
answered Dec 30 '18 at 5:22
ThinkerThinker
2,234623
2,234623
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am usingevent.target.className.indexOf("search-item") !== -1since all the anchor tag has the classsearch-item
– Thinker
Dec 30 '18 at 5:30
add a comment |
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am usingevent.target.className.indexOf("search-item") !== -1since all the anchor tag has the classsearch-item
– Thinker
Dec 30 '18 at 5:30
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
it works!! great ... I cant understand event.target.className.indexOf("search-item") !== -1 Could you explain
– ReNinja
Dec 30 '18 at 5:28
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am using
event.target.className.indexOf("search-item") !== -1 since all the anchor tag has the class search-item– Thinker
Dec 30 '18 at 5:30
@Rennie I am checking whether the clicked element is an anchor or not. For that, I am using
event.target.className.indexOf("search-item") !== -1 since all the anchor tag has the class search-item– Thinker
Dec 30 '18 at 5:30
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53975328%2fget-the-drop-down-items-in-the-console-in-react-js%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
Could you show us what you've tried till now? And what doesn't work?
– Maaz Syed Adeeb
Dec 30 '18 at 4:46
i need to add the functionality in handleSearchBtn() using document.getElementsByClassName('search-item') i will get all the items but I need to get the clicked items
– ReNinja
Dec 30 '18 at 4:51
For example, you have clicked the
PMIDandAuthorsand when you click on the handleSearchBtn, you need to getPMID, Authors, right?– Thinker
Dec 30 '18 at 4:56
Yes like a radio btn only one selection can be made and it should be displayed
– ReNinja
Dec 30 '18 at 5:02