React版本:16.8.2
const { useState } = React;
const Dropdown = ({
options,
onClick,
selected,
}) => {
const [showDropDown, setShowDropDown] = useState(false);
function toggleDropDown() {
setShowDropDown(v => !v);
}
function createOption(o) {
return (
<div
key={o}
className='drop-down__option'
onClick={() => {
onClick(o);
toggleDropDown();
// The following isn't working either
// setShowDropDown(false);
}}
>
{o}
</div>
);
}
return (
<div
onClick={toggleDropDown}
className='drop-down'
>
<div>{selected}</div>
{showDropDown && (
<div className='drop-down__list'>
{options.map(createOption)}
</div>
)}
</div>
);
};
const App = () => {
const [selected, setSelected] = useState(0);
return (
<Dropdown
selected={selected}
options={[0,1,2,3]}
onClick={v=>{setSelected(v)}}
/>
);
}
ReactDOM.render(
<App />,
document.getElementById('root'),
);
所以,这是一个简单的下拉菜单,当您点击容器时,它会切换下拉菜单。
但问题在于,点击其中一个选项后,选项已更新,但下拉菜单未关闭。
因此,在以下代码中,toggleDropDown()似乎没有任何效果。
onClick={() => {
onClick(o);
toggleDropDown();
// The following isn't working either
// setShowDropDown(false);
}}
这里可以找到一个演示例子:https://codepen.io/vensa-albertgao/pen/ommGZe
我错过了什么吗?