Reactjs 反应-如何根据单击事件将子状态更改为父状态

我已经建立了这样一个侧边栏

<SideBar>
    <SideBarItem/>
    <SideBarItem selected/>
    <SideBarItem/>
</SideBar>

所选内容确定边框颜色。现在，当我单击侧边栏时，我希望边框颜色相应地改变。这是我的尝试

require('./SideBar.scss');
export class SideBar extends React.Component {
    setSelection(e) {
        // Set the selection border
        console.log(e);
        this.props.children.forEach(child => {
            console.log(child)
            if (child == e.target) { // This doesn't work
                child.select();
            } else {
                child.deSelect();
            }
        });
    }
    render() {
        return (
            <div onClick={this.setSelection.bind(this)} className="SideBar">
                {this.props.children}
            </div>
        );
    }
};

require('./SideBar.scss');
export class SideBarItem extends React.Component {
    constructor(props) {
        super();
        if (props.selected) {
            this.state = {selected: true, style: {
                boxShadow: '4px 0 0 #10956D'
            }};
        } else {
            this.state = {selected: false, style: {}};
        }
    }
    select() {
        this.setState({selected: true, style: '4px 0 0 #10956D'});
    }
    deSelect() {
        this.setState({selected: false, style: ''});
    }
    render() {
        return (<div onClick={this.props.onClick} style={this.state.style} className="SideBarItem">
            {this.props.children}
        </div>);
    }
};

require（'./SideBar.scss'）；
导出类侧栏扩展了React.Component{
选举（e）{
//设置选择边框
控制台日志（e）；
this.props.children.forEach（child=>{
console.log（子级）
如果（child==e.target）{//这不起作用
child.select（）；
}否则{
取消选择（）；
}
});
}
render（）{
返回(
{this.props.children}
);
}
};
要求（'./侧栏.scss'）；
导出类SideBarItem扩展React.Component{
建造师（道具）{
超级（）；
如果（选择道具）{
this.state={selected:true，style:{
boxShadow:'4px0#10956D'
}};
}否则{
this.state={selected:false，style:{}；
}
}
选择（）{
this.setState（{selected:true，style:'4px0#10956D'}）；
}
取消选择（）{
this.setState（{selected:false，样式：“”}）；
}
render（）{
返回(
{this.props.children}
);
}
};

---

正如您所看到的，这个想法是为侧栏提供一个单击处理程序，它迭代子项并将其与事件进行比较。我找不到检查事件目标是否与子事件匹配的方法

您可以通过强制

侧栏

将

onClick

处理程序附加到每个子项来实现所需的行为。并将单击的子项的索引作为参数传递，以便以后可以唯一地标识它

在

侧边栏.render中类似的内容应该可以实现以下功能：

var childIndex = -1;
var modifiedChildren = React.Children.map(this.props.children, (child) => 
{
    childIndex++;
    return React.cloneElement(
        child,
        {onClick: () => this.setSelection(childIndex)},
        child.props.children);
})

return <div className="SideBar">{modifiedChildren}</div>

var childIndex=-1；
var modifiedChildren=React.Children.map（this.props.Children，（child）=>
{
childIndex++；
返回。克隆元素(
小孩
{onClick:（）=>this.setSelection（childIndex）}，
儿童。道具。儿童）；
})
返回{modifiedChildren}
您可以通过强制
侧栏
将
onClick
处理程序附加到每个子项来实现所需的行为。并将单击的子项的索引作为参数传递，以便以后可以唯一地标识它

在
侧边栏.render中类似的内容应该可以实现以下功能：

var childIndex = -1;
var modifiedChildren = React.Children.map(this.props.children, (child) => 
{
    childIndex++;
    return React.cloneElement(
        child,
        {onClick: () => this.setSelection(childIndex)},
        child.props.children);
})

return <div className="SideBar">{modifiedChildren}</div>

var childIndex=-1；
var modifiedChildren=React.Children.map（this.props.Children，（child）=>
{
childIndex++；
返回。克隆元素(
小孩
{onClick:（）=>this.setSelection（childIndex）}，
儿童。道具。儿童）；
})
返回{modifiedChildren}
为什么要在父级中添加一个调用子级方法的onClick处理程序，而不是在子级中添加onClick处理程序？因为我需要在其他子级@pwolaq上调用deSelect，如果我改为将处理程序添加到每个子项，我如何取消选择以前选择的项？为什么要在父项中添加一个调用子项方法的onClick处理程序，而不是在子项中添加onClick处理程序？因为我需要在其他子项@pwolaq上调用deselect，如果我改为将处理程序添加到每个子项中，如何取消选择以前选择的项？