ReactJS：材質UI浮動按鈕onTouchTap調用的URL列表項它

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，它觸發按鈕下面的ListItem的onTouchTap。

第二次，當它下面沒有ListItem，並且我點擊「添加」時，它會爲添加調用正確的onTouchTap事件。

我該如何解決它的第一種情況，優先onTouchTapFloatingActionButton？

Answer 1

您需要攔截該操作的事件對象並停止在您調用的函數中傳播點擊。

所有你需要做的是事件傳遞給函數，然後調用stopPropagation，就像這樣：

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