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!

Answer 1

You have some options.

1. 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)
}

2. 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

3. 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