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

Question

I need to display the dropdown options of a select when I click on a button.

I tried with the ref and focus or click but it's not working.

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);

I need when I click on the button the select show me the dropdown options

Answer 1

I recommend you to see the below link. I think that's what which you are looking for: https://medium.com/@wwayne_me/how-to-manually-open-select-in-react-1169967eb33b

In summary it talks about an attribute named size which with setting it to non-zero value you can set the select open and with setting it to zero it will be closed.

So your code would be like this:

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

Try it and let me know if it works out.

Answer 2

This is one way of doing it:

See if that works for you.

 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>