Checkboxがmaterial-uiのtab onChangeイベントを起動するのはなぜですか？

Question

私はReactにMaterial UIを使用しています。

私は、タブの内側にあるチェックボックスを持っている：

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を見つけなかったが、それは同様に動作するようだ。