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

Question

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

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

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [value, setValue] = React.useState(false);
  const selectRef = React.useRef();
  const handleClick = () => {
    // selectRef.current.focus();
    selectRef.current.click();
  };
  return (
    <div className="App">
      <button onClick={handleClick}>click me !</button>
      <select
        open
        ref={selectRef}
        value={value ? "activate" : "deactivate"}
        onChange={e => setValue(e.target.value === "activate")}
      >
        <option value="activate">Activate</option>
        <option value="deactivate">Deactivate</option>
      </select>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

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>