React-bootstrap: Dropdown.item, onSelect returns a null target

Question

I am using react-bootstrap and I am implementing a dropdown menu in my react web page. In my dropdown menu, I am calling a handleClick function when button is selected.

<Dropdown.Menu>
    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>
    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>
    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>
    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>
</Dropdown.Menu>

Here is my handleClick function:

handleClick = (eventkey, event) => {
  console.log(eventkey)
  console.log(event)
}

However, the event.target is null, attached below is the console.log from my client browser:

Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: ƒ, …}
nativeEvent: (...)
type: (...)
target: null

I have tried binding and not-binding the function in the constructor but both have produced null values for event.target

this.handleClick = this.handleClick.bind(this);

What am I doing wrong here? Any form of concept clarification would be greatly appreciated!

You need this to get the value of the item, right?

Mosh Feu
– Mosh Feu

2020-02-05 15:53:41 +00:00
Commented Feb 5, 2020 at 15:53 — Mosh Feu
– Mosh Feu, Commented Feb 5, 2020 at 15:53
@MoshFeu that is right, i need to get the selected value

Dustyik
– Dustyik

2020-02-05 16:26:57 +00:00
Commented Feb 5, 2020 at 16:26 — Dustyik
– Dustyik, Commented Feb 5, 2020 at 16:26
Have you tried onSelect instead of onClick?

Mario Subotic
– Mario Subotic

2020-02-05 16:52:39 +00:00
Commented Feb 5, 2020 at 16:52 — Mario Subotic
– Mario Subotic, Commented Feb 5, 2020 at 16:52

Mosh Feu · Accepted Answer · 2020-02-05 19:23:02Z

1

You have some options.

React is throw a warning when trying to access the event

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See ... for more information.

So, in order to get access to the original event, you should call to event.persist() before you access the event.

Like this:

handleClick = (eventkey, event) => {
  event.persist();
  console.log(eventkey)
  console.log(event)
}

You can use the eventkey to pass the value

change = eventkey => {
  // a.persist();
  alert(`you chosen: ${eventkey}`);
};

<Dropdown onSelect={this.change}>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item eventKey="baudratestate1200">1200</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate2400">2400</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate4800">4800</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate9600">9600</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-r7n0f

Call the function with hardcoded param

change = option => {
  alert(`you chosen: ${option}`);
};

<Dropdown.Item onSelect={()=> this.change("baudratestate1200")}> 1200
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate2400")}> 2400
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate4800")}> 4800
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate9600")}> 9600
</Dropdown.Item>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-6gknv

edited Feb 5, 2020 at 19:23

answered Feb 5, 2020 at 19:15

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dustyik Over a year ago

ahh i see, the event.persist() was the issue here, thanks so much for the help!!! passing the value through event key is a neat little trick too!

Mosh Feu Over a year ago

Sure :) Good luck!

Collectives™ on Stack Overflow

React-bootstrap: Dropdown.item, onSelect returns a null target

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related