ReactJS：

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のURLを呼び出しonTouchTap材質UIのフローティングボタンボタンの下のListItemのonTouchTapがトリガーされます。

2度目は、ListItemがなく、「追加」を押すと、「追加」の正しいonTouchTapイベントが呼び出されます。

FloatingActionButtonの優先度をonTouchTapにするにはどうすればよいですか？

Answer 1

アクションのイベントオブジェクトをインターセプトし、呼び出す関数のクリックの伝播を停止したいと思うでしょう。

あなたがしなければならないのは、関数にイベントを渡し、その後のstopPropagationを呼び出し、そのようなものです：

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