события нажатия не работают внутри моей функции карты

Question

У меня небольшая проблема с моим кодом. Мой onClick не работает внутри функции карты, не только onClick, как onKeyPress, onKeyDown. но другие методы работают как onmouseover.

вот мой пример https://codesandbox.io/s/exciting-clarke-h1n4u

Спасибо за ответ.

Answer 1

Пожалуйста, измените onKeyDown на onMouseDown и selectionHandler на () => selectionHandler(arayValue), как показано ниже:

return (
    <DropdownContainer>
      <DropdownInput
        placeholder={"search"}
        onChange={e => setDropValue(e.target.value)}
        value={dropValue}
      />
      <DropdownBlock>
        {array.map(arayValue => (
          <DropDownSpan onMouseDown={() => selectionHandler(arayValue)}>{arayValue}</DropDownSpan>
        ))}
      </DropdownBlock>
    </DropdownContainer>
  );

Answer 2

Это сработало для меня, чтобы получить значение selectionHandler():

<DropDownSpan onClick={() => selectionHandler(arayValue)}>{arayValue}</DropDownSpan>

Вы можете увидеть, как это работает, если вы console.log(value) в selectionHandler. Тем не менее, вы в настоящее время регистрируете dropValue сразу после установки его с помощью setDropValue. Поскольку это обновление происходит асинхронно, переменная не может быть установлена ​​до вызова console.log().