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> |
в реакте не разбираюсь. нативно делают так
if(e.target == e.currentTarget) // если true то что-то делаем e.currentTarget - Ссылка на объект слушателя события e.target - Ссылка на объект, который отправил событие |
Часовой пояс GMT +3, время: 09:49. |