爲什麼Checkbox在material-ui中觸發Tabs onChange事件？

Question

我正在使用Material UI作爲React。

我有一個複選框選項卡內：

const Layout =() => (
<Tabs value='a' onChange={e => console.log(e)}> 
    <Tab label='a' value='a'> 
    <Checkbox /> 
    </Tab> 
</Tabs> 
); 

當我點擊複選框Tabs「onChange事件被炒魷魚。這是故意的行爲嗎？有沒有辦法避免這種情況？

下面是一個例子：https://github.com/evgeny-t/material-ui-webpack-example/compare/master...evgeny-t:checkbox-inside-tabs?expand=1

Answer 1

它似乎並不是故意行爲。我能不與下面的代碼發射該選項卡的onChange檢查和取消選中該複選框：

handleChangeCapture(e) { 
    e.stopPropagation(); 
} 
checkUncheck(e) { 
    console.log('change') 
    this.setState({ 
     isChecked: !this.state.isChecked 
    }); 
} 

render() { 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
      <Tabs value='a' onChange={ e => console.log(e) }> 
       <Tab label='a' value='a'> 
        <div onChangeCapture={this.handleChangeCapture}> 
         <Checkbox onClick={this.checkUncheck} checked={this.state.isChecked}/> 
        </div> 
       </Tab> 
      </Tabs> 
     </MuiThemeProvider> 
    ); 
} 

當然，我說isChecked: false的狀態，並把在構造this.checkUncheck = this.checkUncheck.bind(this);。在父div上使用onChangeCapture並停止事件傳播（使用stopPropagation）基本上就是我所做的。 This answer explains how onClickCapture works。我沒有在documentation中明確地找到onChangeCapture，但它似乎工作相似。