Question

我已经设置了这样的侧边栏

<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>);
    }
};

正如您所看到的那样，想法是为SideBar设置一个点击处理程序，该处理程序遍历子项并将其与事件进行比较。我找不到检查事件目标是否与孩子匹配的方法。

Answer 1

您可以通过强制SideBar将onClick个处理程序附加到每个孩子来实现所需的行为。并将点击的子项的索引作为参数传递 - 以后您可以唯一地识别它。

SideBar.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>

React - 如何根据click事件将子状态更改为parent

1 个答案: