С Новым годом! Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/18: Рейтинг темы: голосов - 18, средняя оценка - 4.56
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472

Как отключить событие фокуса у дочернего элемента?

14.11.2019, 23:19. Показов 3985. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как отключить событие фокуса у дочернего элемента?
В коде ниже работает получение фокуса у родительского div и когда он теряется, однако проблема в том, что при клике на дочерний элемент этого div второй раз(например, когда кликнул на textarea, а потом на кнопку "сохранить" или другой внешний элемент) у родителя теряется фокус и событие дочер элемента не срабатывает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import {bindEvents} from "../../helpers/functions";
import "./Status.scss";
import * as React from "react";
 
export default class Status extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        bindEvents(this, ['write', 'save', 'changeEditMode', 'onEditMode', 'offEditMode']);
    }
 
    write(e) {
        if (e.target.value.length <= 141) this.props.statusProps.writeStatus(e.target.value);
    }
 
    save() {
       this.props.statusProps.saveStatus();
    }
 
    changeEditMode(value) {
        if (this.props.statusProps.checkAccessEdit) this.props.statusProps.changeEditMode(value);
    }
 
    onEditMode() {
        this.changeEditMode(true);
    }
 
    offEditMode() {
        this.changeEditMode(false);
    }
 
    componentDidUpdate(prevProps) {
        if (this.textInput.current) this.textInput.current.focus();
    }
 
    onFocusCapture(ev) {
        console.log(ev.current);
    }
 
    render() {
        let status = this.props.statusProps.status;
 
        if (this.props.statusProps.checkAccessEdit && status.length < 1) status = 'Здесть мог бы быть ваш статус.';
 
        return (
            <div className="status-field" onClick={this.onEditMode} >
                {this.props.statusProps.checkEditMode ?
                    (
                        <div onBlur={this.offEditMode} onFocusCapture = {this.onFocusCapture} ref={this.textInput}>
                            <textarea className="form-control form-control-sm"
                                      type="text"
                                      placeholder="Впишите статус"
                                      onChange={this.write}
                                      value={this.props.statusProps.status}
                                      style={{resize: 'none'}}
                                      tabIndex="-1"
                            />
                            <button tabIndex="-1" className="form-control form-control-sm" onClick={this.save}>Сохранить</button>
                        </div>
                    )
                    :
                    (
                        <div className="status-field-text">
                            {status}
                        </div>
                    )
                }
            </div>
        )
    }
}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
14.11.2019, 23:19
Ответы с готовыми решениями:

Создать событие для дочернего элемента tabPage
Граждане-товарищи, обращаюсь к вам вот с какой проблемой: Есть tabControl, есть возможность создавать на нем новые tabPage. Каждая...

Не срабатывает рендер у дочернего элемента дочернего элемента(не тавтология)
Не срабатывает рендер у дочернего элемента дочернего элемента(не тавтология) https://gitlab.com/Kir1/redux.git Ветка two-child При...

Как создать событие потери фокуса для TextField?
Как создать событие потери фокуса для TextField? Хочу проверять содержимое текстового поля не по нажатию enter, а по потери фокуса.

6
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 10:08
Я неочень понял сути проблемы. Отвечая прямо на вопрос - никак. Что вы пытаетесь вообще сделать принципиально?
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 10:23  [ТС]
drmedus, я хочу сделать поле статуса профиля как вконтакте, что бы сначала был div со статусом, после клика появлся контейнер с инпутом и кнопкой "сохранить", и что бы если нажал на внешний элемемент, снова появлялся первый div.
0
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 10:40
специально слазил в ВК и посмотрел =) Если я все же верно понял задачу, то это реализуется не через потерю фокуса, а через всплытие клика.
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 10:43  [ТС]
drmedus, в смысле на ВСЕ элементы дум поставлено событие клика и во время клика мы смортрим был ли последний элемент частью поля статуса и если да, то скрываем родителя?
0
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 11:44
почему на все? вникните в механизм всплытия.
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 13:32  [ТС]
drmedus, я делал прерывание событий по всплытию, но у меня не получилось.
https://jsfiddle.net/BossBossEx/w7ho3b5c/17/
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.11.2019, 13:32
Помогаю со студенческими работами здесь

Как обработать в дбгрид событие изменения фокуса строки?
Мне нужно, чтобы происходили определённые события при изменении фокуса строки любым способом, т.е.: кликом мышки, нажатием клавиши...

Как обработать событие для дочернего окна?
Добрый день! ситуация: Есть основное окно и её оконная функция. так же было создано дочернее окно в качестве класса был указан...

Как отловить событие потери и получения фокуса кнопкой TButton?
Как отловить событие потери и получения фокуса кнопкой TButton? Подозреваю, что нужно обрабатывать сообщения ОС, но какие? Подскажите...

Как в диалоге отловить событие помещения фокуса на какой-нибудь контрол?
Привет всем! А как, собственно говоря, в диалоге отловить событие помещения фокуса на какой-нибудь контрол? Ну т.е. нажали на...

Событие при активации textbox. Или событие при изменения фокуса
Здравствуйте. Подскажите можно ли создать свое событие происходящий вовремя активации textbox. Имеется ввиду создать свой класс...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru