Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Js onblur onfocus как спрятать элемент (https://javascript.ru/forum/misc/74480-js-onblur-onfocus-kak-spryatat-ehlement.html)

VyacheslavBozere 16.07.2018 09:43

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>

j0hnik 16.07.2018 09:52

в реакте не разбираюсь. нативно делают так
if(e.target == e.currentTarget) // если true то что-то делаем

e.currentTarget - Ссылка на объект слушателя события
e.target - Ссылка на объект, который отправил событие


Часовой пояс GMT +3, время: 09:49.