всем привет) вставил в тултип инпут. и какую функцию нужно вызвать чтобы при нажатии на enter тултип пропадал

onKeyDown, onKeyPress

это да) а че в них написать))

onKeyDown, onKeyPress

onEnterDown

это да) а че в них написать))

show: false

onEnterDown

Возможно это фича из антд🤷‍♂

show: false

попробую

это да) а че в них написать))

Проверяешь код клавиши (e.keycode вроде) и если ентер, то закрываешь тултип

попробую

Ну не прямо так, но логика примерно такая))

Ну не прямо так, но логика примерно такая))

ну такое себе)))

https://stackoverflow.com/a/31273404/5524590

ну такое себе)))

Поищи синтетический эвент onEnterDown, должен быть изкоробки. Дальше просто делай кондишнл рендеринг🤷‍♂

я знаю как ловить нажатие клавиши) вопрос был в том какие у тултипа свойства отвечают за появление и скрытие)

я знаю как ловить нажатие клавиши) вопрос был в том какие у тултипа свойства отвечают за появление и скрытие)

Какие сам укажешь)

а можно как нибудь имитировать нажатие кнопки? тоесть когда нажимаешь на инпуте интер. нажимается кнопка.

я просто с бутстрапа взял тултип и хз какие. у него свойства

а можно как нибудь имитировать нажатие кнопки? тоесть когда нажимаешь на инпуте интер. нажимается кнопка.

Да, можно

Да, можно

как

я просто с бутстрапа взял тултип и хз какие. у него свойства

console.log(…)

edit

как

Нажал key, отработал событие которое на button

Нажал key, отработал событие которое на button

а как отработать событие которое на баттон? когда ставишь на баттон onclick допустим вызывается ф. а как сделать как ты сказала

а как отработать событие которое на баттон? когда ставишь на баттон onclick допустим вызывается ф. а как сделать как ты сказала

Вызвать функцию?)))

сказал*

так вызывается функция и вызвать нажатие кнопки это разные вещи

Почитай про реакт, про жс там. У меня тож такие вопросы были, но потом я почитал доку)

click() ?

так вызывается функция и вызвать нажатие кнопки это разные вещи

onEscPress={this.handleEvent}

как

Вызвать напрямую код который вызывается при клике

он зашит в бустрап)

в коде у меня этой функции нету

Через ref? https://pastebin.com/fvWvdnnS

Он тролит похоже

Чуваки, как поменять стейт компонента при потере фокуса на компоненте?

он зашит в бустрап)

Показывай код как вызывается бутстрап в реакте

Чуваки, как поменять стейт компонента при потере фокуса на компоненте?

onBlur?

или при клике на область вне компонента

Он тролит похоже

хахах не) туплю прост

Чуваки, как поменять стейт компонента при потере фокуса на компоненте?

Фокус ввода или мыши?

Фокус ввода или мыши?

клик

onBlur?

не работает ((

я хочу кликать за пределами компонента и менять ему стэйт с true, на false. Ни чего не выходит

Так при чем тут фокус?

Так при чем тут фокус?

ок, не правильно объяснил

при клике вне компонента

ок, не правильно объяснил

Наверное тебе нужен лиснер на документ, который будет проверять, был ли сделан клик над нужным элементом

я хочу кликать за пределами компонента и менять ему стэйт с true, на false. Ни чего не выходит

Создай под компонентом невидимый div и при клике на нём меняй состояние

https://www.google.com/search?q=change+component+state+click+outside&ie=utf-8&oe=utf-8&client=firefox-b

можно гуглить по react onclickoutside

https://www.google.com/search?q=change+component+state+click+outside&ie=utf-8&oe=utf-8&client=firefox-b

благодарю

можно гуглить по react onclickoutside

спасибо)

можно гуглить по react onclickoutside

onclickoutside это некий синтетик эвент? Наподобие onEnterDown. Не могу нагуглить обоих.

onclickoutside это некий синтетик эвент? Наподобие onEnterDown. Не могу нагуглить обоих.

не, это скорее название либы

не, это скорее название либы

Там 10 строчек, зачем либа нужна?

onclickoutside это некий синтетик эвент? Наподобие onEnterDown. Не могу нагуглить обоих.

React-spatial-navigation либа похоже. Но я на антд писал, там все очень удобно было изкоробки

Пока из коробки. Шаг влево или прыжок на месте и ты в китайском коде.

Там 10 строчек, зачем либа нужна?

https://github.com/Pomax/react-onclickoutside/blob/master/src/index.js ну тут как-то поболее

Пока из коробки. Шаг влево или прыжок на месте и ты в китайском коде.

Ну хоть не индийский

та и вообще npm install быстрее чем даже 10 строчек написать и оттестировать

Мне довелось допиливать AntD под нужный дизайн. Ой. Вчера в чате у ней нашли забавный пасхалк, вылазящий в продукте.

https://github.com/Pomax/react-onclickoutside/blob/master/src/index.js ну тут как-то поболее

Там addEventListener на mouse click и потом убрать листенер. Ссылка выше.

хочу добраться до функции в бутстрапе которая выполняется при нажатии на бутстраповскую кнопку. как сделать это?

чтобы вызвать эту функцию не нажимая на кнопку

от бустрапа

Навесить хендлер самому?

мне нужна функция которая при клике на кнопку скрывает тултип. она только в кнопке есть)

Залогировать кнопку и узнать имя функции. Что там может быть, кроме onClick из спек html'a.

хочу добраться до функции в бутстрапе которая выполняется при нажатии на бутстраповскую кнопку. как сделать это?

Тебе нужно в чат по html/bootstrap

Тебе нужно в чат по html/bootstrap

у меня реактовский бустрап

Чувак, добавь onClick на кнопку, который будет писать "тест" в консоль и посмотри, если он отработает.

у меня реактовский бустрап

Тогда можем стоит скинуть код компонента, а не HTML?

Чувак, добавь onClick на кнопку, который будет писать "тест" в консоль и посмотри, если он отработает.

не понял о чем ты)

вот так кнопка выглядит

На интересную те кнопку, об которой пишешь, добавь вот это и посмотри, что будет в консоли.

ну я скинул что в консоли)

Если да, вместо console.log() можно навесить любое действие, закрытие попапа в том числе.

не понимаешь просто суть проблемы))) еще раз поясню. тултип закрывается только на кнопку edit и открывается. а эта функция вшита в бутсрап. я хочу при нажатии на enter на инпуте скрывать тултип. как ловить нажатия интера я знаю. а как скрыть тултип - нет. догадываюсь что достать из edit func которая скрывает тултип. или хз как вообще

@el_anonimo я так и не смог решить проблему clickOutside

const UserBar = ({ image, username }) => { const [state, setState] = useState(false); const clickOutside = () => { setState(false); }; useEffect(() => { document.addEventListener('click', clickOutside); return () => { document.removeEventListener('click', clickOutside); }; }); return ( <> <Button className="user-pick-wrap" onClick={() => setState(true)}> <img src={image} className="user-pick" alt={username} /> </Button> <ul className={cx('dropdown-menu', { 'dropdown-menu-active': state })}> <li className="dropdown-menu-item"> <Link to={`/@${username}`} className="link"> Signed in as <span className="username">{username}</span> </Link> </li> <li className="dropdown-menu-item"> <Link to="/settings" className="link"> Settings </Link> </li> <li className="dropdown-menu-item"> <Button onClick={() => {}}>logout</Button> </li> </ul> </> ); };

Если кликать по самому юзербару он теперь не открывается, так как document.addEventListener('click', clickOutside); на нём тоже срабатывает

ref нет.