javascript - 切换类，除非在 React 中单击了一个 child

Question

我想要一个标题，您可以在其中单击它来隐藏/显示它。但是在这个标题上，会有一组按钮，它们将成为子元素的一部分。如果你点击这些按钮，我不希望整个事情崩溃。

我如何在 React 中实现这一点？到目前为止我所拥有的是要折叠一切，因为 Child 在 Parent 和 row

下

class Parent extends Component {
    constructor() {
        super();

        this.state = {
            show: false
        }
    }

    render() {
        return (
            <div className="row" onClick={() => this.setState({show: !this.state.show})}>
                <div className="col-2">
                    <Child/>
                </div>
                ...
            </div>
        )
    }
}

Answer 1

您应该能够在按钮的事件处理程序中使用 stopPropagation() 以防止它进一步冒泡。参见 http://facebook.github.io/react/docs/events.html获取 API 详细信息。

class Child extends Component {
    handleClick(event) {
        event.stopPropagation();
        doSomething();
    }

    render() {
        return (
            <button onClick={e => this.handleClick(e)}>
                Click Me!
            </button>
        );
    }
}