单击事件在我的地图功能中不起作用

Question

我的代码有点问题。 我的onClick在map功能中不起作用，不仅像onKeyPress，onKeyDown一样。 但其他方法的工作方式与鼠标悬停类似。

这是我的示例 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>

如果你在selectionHandler中console.log(value)，你可以看到它的工作。但是，您当前正在使用setDropValue进行设置后立即登录dropValue。由于该更新是异步发生的，因此在调用console.log()之前可能不会设置变量。