Question

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

如何在React中实现这一目标？到目前为止我所拥有的东西将会崩溃一切，因为Child在父母和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

在Child的onClick事件处理程序中，添加此行

event.stopPropagation()

Answer 2

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

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

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

切换类，除非在React中单击了一个子项

2 个答案: