Наследование в react

[proudwax]

Есть в bem-components блок button. На сколько я понимаю, при клике на этот блок отрабатывает модификатор focused и focused-hard. Т.е. модификатор появляется при фокусе и удаляется после клика.

Думал реализовать это в react. Компонент Button в нём рендер: return (<button onFocus={this.handleFocusIn} onBlur={this.handleFocusOut} > <span className='Button-Text'> {this.props.children} </span> </button> );

так вот, если добавить onClick={this.handleFocusOut}, и использовать где-нибудь компонент <Button onClick={тут какая-нибудь магия}>Test</Button>. То клик с handleFocusOut не отрабатывает. Может, конечно, я что-то не то делаю. Так вот вопрос, как наследовать event`ы

[vitkarpov]

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

[proudwax]

Button.js:

https://github.com/proudwax/fora-r/blob/21c27787a153e4ac684d20547e55677a833f7434/src/components/Button/Button.js только вместо onMouseUp -> onClick

https://github.com/proudwax/fora-r/blob/21c27787a153e4ac684d20547e55677a833f7434/src/containers/GameButtonConnect/GameButtonConnect.js

[vitkarpov]

Проблема в том, что ты прокидываешь пропсы из родительского компонента и onClick сверху перетирает тот, который уже был в самом компоненте. Никакой магии наследования тут нет, пропсы это просто словарь, и если в нём есть два одинаковых ключа — тот, что появился позже затирает уже существующий.

Чтобы этого избежать нужно явно в дочернем компоненте подготовиться к тому, что родительский компонент захочет указать свой onClick:

+            onClick={(e) => {
+                // подготовились вызвать родительский обработчик, если есть
+                this.props.onClick && this.props.onClick(e);
+                // делаем всё, что необходимо самому компоненту при клике
+                this.handleFocusOut();
+            }}

Вот и всё «наследование».

[vitkarpov]

@proudwax 👆 , надеюсь, поможет. Успехов!

PS. Счекаутил проект, вроде игру какую-то делаешь. 👍