Как отобразить выпадающие опции при нажатии на кнопку? - PullRequest
Новая
       7

Как отобразить выпадающие опции при нажатии на кнопку?

0 голосов
/ 18 июня 2019

Мне нужно отобразить раскрывающиеся опции выбора, когда я нажимаю на кнопку.

Я пытался с реф и фокус или нажмите, но это не работает. 


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

Мне нужно, когда я нажимаю на кнопку выбора, покажи мне варианты выпадающего меню

Ответы [ 2 ]

0 голосов
/ 19 июня 2019

Это один из способов сделать это:

Посмотрите, работает ли это для вас. 

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>
0 голосов
/ 18 июня 2019

Рекомендую посмотреть ссылку ниже. Я думаю, это то, что вы ищете: 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
};

Попробуйте и дайте мне знать, если это сработает.

...