React- bootstrap: Dropdown.item, onSelect возвращает нулевую цель - PullRequest
Новая
       5

React- bootstrap: Dropdown.item, onSelect возвращает нулевую цель

1 голос
/ 05 февраля 2020

Я использую , и я реализую раскрывающееся меню на моей веб-странице реагирования. В моем выпадающем меню я вызываю функцию handleClick, когда нажата кнопка. 

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

Вот моя handleClick функция: 

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

Однако event.target имеет значение null, ниже прикреплен console.log из моего клиентского браузера: 

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

Я пробовал связывать и не связывать функцию в конструкторе, но оба выдали нулевые значения для event.target 

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

Что я здесь не так делаю? Любая форма разъяснения концепции будет принята с благодарностью!

1 Ответ

0 голосов
/ 05 февраля 2020

У вас есть несколько вариантов.

  1. Реакция выдает предупреждение при попытке получить доступ к событию

Предупреждение: это синтетическое c событие используется повторно по причинам производительности. Если вы видите это, вы получаете доступ к свойству nativeEvent в освобожденном / аннулированном событии syntheti c. Это установлено в нуль. Если вам необходимо сохранить исходное событие syntheti c, используйте event.persist (). Смотрите ... для получения дополнительной информации.

Итак, чтобы получить доступ к исходному событию, вы должны позвонить на event.persist(), прежде чем получить доступ к событию.

Вот так : 

handleClick = (eventkey, event) => {
  event.persist();
  console.log(eventkey)
  console.log(event)
}
Вы можете использовать eventkey для передачи значения 
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

Вызовите функцию с жестко заданным параметром 
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

...