ReactJS：onTouchTap上的Material UI浮动按钮调用url下面的ListItem

Question

我的Component看起来像

const style = {
    margin: 0,
    top: 'auto',
    right: 20,
    bottom: 20,
    left: 'auto',
    position: 'fixed',
};
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false
        }
    }

    toggleDrawer = () => this.setState({open: !this.state.open});
    handleAddMenu = () => {
        console.log("Opening New Menu Form");
        this.props.history.push("/addMenu");
    }


    render() {
        return (
            <div>

                <AppBar
                    title="SpicyVeggie"
                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                    onLeftIconButtonTouchTap={this.toggleDrawer}
                />

                <Drawer
                    docked={false}
                    width={300}
                    onRequestChange={this.toggleDrawer}
                    open={this.state.open}
                >
                    <AppBar title="SpicyVeggie" onLeftIconButtonTouchTap={this.toggleDrawer} />
                    <MenuItem
                        primaryText="Menu"
                        containerElement={<Link to="/menu"/>}
                        onTouchTap={() => {
                            this.toggleDrawer()
                        }}
                    />
                    <MenuItem
                        primaryText="Summary"
                        containerElement={<Link to="/summary"/>}
                        onTouchTap={() => {
                            this.toggleDrawer()
                        }}
                    />
                </Drawer>

                <div className="container">
                    {this.props.children}
                </div>
                <div>
                    <FloatingActionButton
                        style={style}
                        mini={true}
                        secondary={true}
                        onTouchTap={this.handleAddMenu}>
                        <ContentAdd />
                    </FloatingActionButton>
                </div>
            </div>
        );
    }
}

export default App;

当我渲染app时，它看起来像是

因此，当我点击Add时，它会触发按钮下方onTouchTap的{​​{1}}。

第二次，当它下面没有ListItem时，我点击“添加”，它会为Add调用正确的ListItem事件。

如何针对第一种情况进行修复，优先考虑onTouchTap的{​​{1}}？

Answer 1

您需要拦截操作的事件对象，并停止在您调用的函数中传播点击。

您所要做的就是将事件传递给函数，然后调用stopPropagation，如下所示：

handleAddMenu = (e) => {
    e.stopPropagation();
    console.log("Opening New Menu Form");
    this.props.history.push("/addMenu");
}