小编Tam*_*amb的帖子

我正在自学JS并试图避免jQuery,直到我的JS技能更好.

目标:为click事件添加一个eventlistener到某个类的所有div.让该类的所有子节点响应该事件.

我的HTML

 <div class="grid-panel six columns">
            <div class="grid-panel-image">
                <i class="fa fa-css3"></i>
            </div>
            <div class="grid-panel-title">
                <h4>css3</h4>
            </div>                  
    </div>
    <div class="grid-panel six columns">
        <div class="grid-panel-image">
            <i class="fa fa-paint-brush"></i>
        </div>
        <div class="grid-panel-title">
            <h4>tamberator</h4>
        </div>
    </div>

我.grid-panel使用这个JS 选择所有的div

var gridPanels = document.querySelectorAll('.grid-panel');

然后,因为它返回一个div数组与类.grid-panel 我添加事件监听器进行点击

for(i=0; i<gridPanels.length; i++){
    gridPanels[i].addEventListener('click', myFunction);
}

我的功能是这个

 myFunction(){
    var e = event.target;

        switch(e){
            case gridPanels[0]:
            modalArray[0].setAttribute("data-modal-display", "show");
            break
            case gridPanels[1]:
            modalArray[1].setAttribute("data-modal-display", "show");
            break
        }

            console.log(e);
    }

如果我单击.grid-paneldiv的一个非常特定的部分和e特定元素的日志,这确实有效.但是,单击div的任何子项将记录e为我单击的元素,但eventlistener不会应用于该元素.我在这个事件代表团中明显遗漏了一些东西.我真的希望函数能够点击所点击的div及其所有子节点.

我有一个非常简单的React库,我使用自己的状态管理.它只是一个高阶组件:

import React from 'react';
/**
 * 
 * @param {Object} state - Reference to SubState instance 
 * @param {Object} chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>{
    const newProps = {};
    for (let key in chunk){
        newProps[key] = state.getProp(chunk[key]);
    }
    return (<Comp {...newProps} {...props} />)
};

export {
    connect
}

我可以这种方式发布库,我将得到一个关于无法<在JSX中解析的语法错误.

所以我通过babel运行代码

//.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

使用这个webpack配置

const path = require('path');
module.exports …