ReactJS : le bouton flottant Material UI onTouchTap appelle url le ListItem qui se trouve en dessous

Question

Mon Component ressemble à

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;

Lorsque je rends le app on dirait que

donc quand je clique sur Add il déclenche onTouchTap de la ListItem sous le bouton.

La deuxième fois, quand il n'y a pas ListItem en dessous, et je clique sur "Ajouter", ça appelle la bonne onTouchTap pour l'ajout.

Comment puis-je le corriger pour le premier cas, pour donner la priorité à onTouchTap pour FloatingActionButton ?

Answer 1

Vous voudrez intercepter l'objet événement de l'action et arrêter la propagation du clic dans la fonction que vous appelez.

Tout ce que vous avez à faire, c'est de transmettre l'événement à la fonction, puis d'appeler stopPropagation, comme suit :

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