Javascript 单击sub<；李>；反应

我想在列表中添加带有react的子类别，但当我单击sub cat时，我有两个事件：第一个在sub上，第二个在父类别上

我怎样才能拥有独生子女类别

这是我的实际代码：

getList(myList){
    return myList.map((item) => {
        let subList = '';
        if (item.hasSub){
            subList = (<ul>{this.getList(item.sub)}</ul>)
        }
        return (
        <li onClick={() => {this.props.clicHandler(item.id)}}>{item.title}<div>{subList}</div></li>);
    })
}

---

谢谢你的帮助

您需要防止事件传播：

getList(myList){
    return myList.map((item) => {
        let subList = '';
        if (item.hasSub){
            subList = (<ul>{this.getList(item.sub)}</ul>)
        }
        return (
        <li onClick={(event) => {event.preventDefault(); this.props.clicHandler(item.id)}}>{item.title}<div>{subList}</div></li>);
    })
}

getList（myList）{
返回myList.map（（项）=>{
让子列表=“”；
如果（项目.hasSub）{
子列表=（
{this.getList（item.sub）}
）
}
返回(
{event.preventDefault（）；this.props.clicHandler（item.id）}>{item.title}{subList}
）；
})
}

这样，捕捉单击的第一个项目将停止单击传播。

问题在于，它将阻止父元素。解决办法是去拜访它

在下面的代码片段中，我向组件添加了一个

clickHandler

方法，在

getList

中，我向组件传递事件（

evt

）和

item.id

。在该方法中，我在调用

this.props.clickHandler

之前调用

evt.stopPropagation（）

。但是，您也可以在父组件的

clickHandler

方法中或在

getList

中执行此操作。选择最适合您的用例的内容

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.clickHandler=this.clickHandler.bind（this）；
}
render（）{
返回
{this.getList（this.props.items）}
；
}
获取列表（列表）{
返回列表。映射（（项目）=>{
const subList=item.hasSub&（
{this.getList（item.sub）}
）；
返回(
{this.clickHandler（evt，item.id）}>{item.title}{subList}
);
});
}
clickHandler（evt，itemId）{
//在调用传递到props中的处理程序之前停止事件传播
evt.stopPropagation（）；
this.props.clickHandler（itemId）；
}
}
常数数据=[
{id:'a'，title:'a'，hasSub:false}，
{id:'b'，title:'b'，hasSub:true，sub:[
{id:'b1'，title:'b1'，hasSub:true，sub:[
{id:'b1a'，title:'b1a'，hasSub:false}，
] },
{id:'b2'，title:'b2'，hasSub:false}，
] },
{id:'c'，title:'c'，hasSub:true，sub:[
{id:'c1'，title:'c1'，hasSub:false}，
{id:'c2'，title:'c2'，hasSub:false}，
] },
];
函数clickHandler（itemId）{
console.log（'clicked item'，itemId）；
}
ReactDOM.render（，document.querySelector（'div'）
顺便说一句，在构建元素列表时，您还需要使用key属性。您是对的！这只是测试代码，所以我的代码有点脏，但我会考虑何时将其转换为真正的代码：）并感谢您作为代码的第一部分！我想要什么！
getList(myList){
    return myList.map((item) => {
        let subList = '';
        if (item.hasSub){
            subList = (<ul>{this.getList(item.sub)}</ul>)
        }
        return (
        <li onClick={(event) => {event.preventDefault(); this.props.clicHandler(item.id)}}>{item.title}<div>{subList}</div></li>);
    })
}