Question

单击按钮时，我需要显示选择的下拉选项。

我尝试使用ref和focus或click，但是它不起作用。

Shift+F10

当我点击按钮时，我需要选择显示下拉选项

Answer 1

我建议您查看以下链接。我认为这就是您要寻找的： https://medium.com/@wwayne_me/how-to-manually-open-select-in-react-1169967eb33b

总而言之，它讨论了一个名为size的属性，通过将其设置为non-zero的值，您可以将选择设置为打开，将其设置为zero的属性将被关闭。

因此您的代码将如下所示：

const handleClick = () => {
    selectRef.size=10;// optional number based on you
};

尝试一下，让我知道是否可行。

Answer 2

这是一种实现方式：

看看是否适合您。

function App() {
  
  const [openDrop,setOpenDrop] = React.useState(false);
  
  function toggleDrop() {
    setOpenDrop((prevState)=>!prevState);
  }
  
  return(
    <React.Fragment>
      <button onClick={toggleDrop}>Drop</button>
      <div className="main">
        App
        {openDrop && <Dropdown/>}
      </div>
    </React.Fragment>
  );
}

function Dropdown() {

  function doSomething() {
    console.log('Let me handle this...');
  }

  return(
    <div>
      <ul>
        <li onClick={doSomething}>Item 1</li>
        <li onClick={doSomething}>Item 2</li>
      </ul>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

.main {
  background-color: lightblue;
}

li {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

单击按钮时如何显示下拉选项？

2 个答案: