Как сделать собственные события в ReactJS?

Question

[SagaraKun]

Изучаю React JS. возник вопрос как сделать свои события для компонентов?
Если со всплытием еще понятно (можно/ нужно передать функцию через props). Но как быть если необходимо раздать дочерним компонентам, которые отрендерились из массива, событие? В том числе вложенным.
Я находил такую конструкцию ref = {(foo) => { this.fooActions = foo}} , но если их пачка то приходится содержать еще и массив с actions.

Возможно есть для этого специальный плагин или решение, буду рад, ссылкам или примерам как строить архитектуру в реакте.
ЗЫ. Redux использую но для событий без изменения стора применять кажется странным.

Answer 1

[Николай]

Либо через props, либо через Redux-store, а можете пример вот этого события когда стор не меняется? Что тогда меняется-то?

Comments

[SagaraKun]

Допустим, есть в шапке (назовем B) кнопка, по нажатию нужно обновит статусы у компонентов (E). но имеется следующая вложенность. A -> (B, C (D (E, E, ...) ))
То есть из B "всплыть" событие в компонент A , потом переправить по цепочке C -> D ->E
Либо както пробросить его до E.

[Николай]

Все нужные компоненты подписаны на store через subscribe, в B делаете dispatch. Очевидно что если нужно обновить общий стейт нескольких компонент - этот стейт должен быть в сторе, иначе зачем вам вообще redux?

Answer 2

[KnightForce]

Как делаю я:

handlerClick(type) {
    return(e){
        let {onClickDiv, onClickSpan} = this.props;
        switch(type) {
             case "clickDiv":
                 onClickDiv && onClickDiv(e);
                 break;

              case "clickSpan":
                 onClickSpan && onClickSpan(e);
                 break;
        }
    }
}

render() {
    return(
        <div onClick={this.handlerClick("clickDiv")}>
            <span onClick={this.handlerClick("clickSpan")></span>
        </div>
    );
}

В итоге можешь писать так:

<MyComponen onClickDiv={что-то}  onClickSpan={что-то} /t>

Answer 3

[kahi4]

Вариантов несколько. Самый простой если не парит расход памяти:

<a onClick={someEventHandler.bind(this, someArg)} /> // someArg будет передан как первый аргумент функции

Более оптимальный по памяти и производительности, но не такой красивый

const handler = (e) => {
   const key = e.target.getAttribute('data-key'); // получаем ключ
}

<a data-key={key} onClick={handler} />