Показать сообщение отдельно
  #1 (permalink)  
Старый 16.07.2018, 09:43
Аспирант
Отправить личное сообщение для VyacheslavBozere Посмотреть профиль Найти все сообщения от VyacheslavBozere
 
Регистрация: 18.03.2018
Сообщений: 31

Js onblur onfocus как спрятать элемент
Всех приветствую. Подскажите пож-та, пытаюсь сделать комбобокс и столкнулся с проблемой, нужно что бы onblur не срабатывал на дочерних элементах. А выбранное значение падало в input. Как это можно подправить ? Куда копать?

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>

<body>

  <div  id="root">
    
  </div>
  <style>

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
 #target:hover {
    background-color: #555;
    color: white;
}
</style> 
  
  <script type="text/babel">
     
      let colors = ["green", "blue", "yellow"];
     let divSet = items => items.map(elem => <li> {elem} </li>);      

     class Combobox extends React.Component{
      constructor(props) {
      super(props);          
      this.closeHead = this.closeHead.bind(this);    
      this.onFocus = this.onFocus.bind(this);
      
    }

    onFocus() {
    container.hidden = false; 
     let getcolors = divSet(colors);     
      let res = <ul>{getcolors}</ul>;          
          ReactDOM.render(
           <div id="list">
           {res}           
           </div>,           
           document.getElementById('container')
         ); 
  }
     *!*
     closeHead() { 
        container.hidden = true;                        
        }  
*/*    
       
    render() {     

        return (
          <div >            
          <input type="text" id="text" placeholder="Начните вводить код или название"     onFocus={this.onFocus}  onBlur={this.closeHead}   />
          <div id="container"></div>
          </div>
       );
    }
  }

 ReactDOM.render(
    <Combobox  />,
    document.getElementById('root')
    )      
  
  </script>

</body>

</html>
Ответить с цитированием