反应版本：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'),);

因此,这是一个简单的下拉菜单,当您单击容器时,它会切换下拉菜单.

But the problem here is,after clicking one of the options,the option has been updated,but the Dropdown is not been closed.

如此看来toggleDropDown();在下面的代码中无效.

        onClick={() => {
          onClick(o);
          toggleDropDown();  
          // The following isn't working either
          // setShowDropDown(false);
        }}

重现示例可以在这里找到：https://codepen.io/vensa-albertgao/pen/ommGZe

我错过了什么？