Почему checkbox запускает вкладки onChange в материале-ui?

Question

Я использую 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);. Использование onChangeCapture в родительском div и остановка распространения события (с stopPropagation) - это в основном то, что я сделал. This answer explains how onClickCapture works. Я явно не нашел onChangeCapture в documentation, но, похоже, работает аналогичным образом.